Geek Answers Handbook

Typescript - TypeError myclass.myFunction is not a function

I am having a problem with the following code.

What is this basically supposed to do. It should download and parse the given JSON file. And in RequestListender, it should show the ID and the string Hello , which is returned by the ToString() method in Product.ts. If the tProduct.Id icon tProduct.Id displayed correctly, the tProduct.ToString() method fails with the error indicated below.

Thank you very much in advance.

Error message:

 TypeError: tProduct.ToString is not a function. (In 'tProduct.ToString()', 'tProduct.ToString' is undefined)

File: Test.ts

 var currentProduct = null as pvis.Product; function runTest(path) { var request = new XMLHttpRequest(); request.onload = loadRequestListener; request.open("get", path, true); request.send(); } function loadRequestListener () { var tProduct : pvis.Product = JSON.parse(this.responseText); if (tProduct.Id) { currentProduct = tProduct; alert('loaded with Id: ' + tProduct.Id ); alert('loaded with Content: ' + tProduct.ToString() ); } else { alert('product failed to load'); } }

Product.ts File

 module pvis { export class Product { Id: string; ToString():string { return 'Hello'; } } }

HTML part:

 <body onload="runTest('assets/products/json/A379N.json')">

Compiled Javascript:

 var pvis; (function (pvis) { var Product = (function () { function Product() { } Product.prototype.ToString = function () { return 'Hello'; }; return Product; })(); pvis.Product = Product; })(pvis || (pvis = {})); var currentProduct = null; function runTest(path) { var request = new XMLHttpRequest(); request.onload = loadRequestListener; request.open("get", path, true); request.send(); } function loadRequestListener() { var tProduct = JSON.parse(this.responseText); if (tProduct.Id) { currentProduct = tProduct; alert('loaded with Id: ' + tProduct.Id); alert('loaded with Content: ' + tProduct.ToString()); } else { alert('product failed to load'); } }

tsconfig.json (I'm not sure if this is relevant):

 { "compilerOptions": { "target": "ES5", "removeComments": true, "preserveConstEnums": true, "out": "js/main.js", "sourceMap": true }, "files": [ "src/Test.ts" ] }
+6
source share
2 answers

Line:

 var tProduct : pvis.Product = JSON.parse(this.responseText);

wrong. The reason it compiles is only due to JSON.parse returning any .

in order to use the Product class, you must somehow instantiate it. Parsing JSON will not do this, it will simply return an object with parsed JSON in it, it will not be an instance of the pvis.Product class.

If what you want to do is enter the JSON result, you can do this using the interface. For example, if you have a JSON object in the form:

 { id: "some value", name: "some name", count: 4 }

You can enter this using the interface:

 interface myInterface { id: string; name: string; count: number; }

And use it like this:

 var myParsedAndTypedJson: myInterface = JSON.parse("....");

An object created in this way will never have methods if you want this functionality to pass this information to a class that can use it, for example,

 class myClass implements myInterface { get id(): string { return this.initData.id; } get name(): string { return this.initData.name; } get count(): number { return this.initData.count; } constructor(private initData: myInterface) { } public ToString() { return this.id + ' ' + this.name + ' ' + this.count; } }

A working example of this can be found here .

You can look at how to work with typescript and JSON interfaces to learn a little more about how this works.

+8
source

I am not familiar with TypeScript, but looking at compiled JavaScript, I notice that tProduct is just a POJO, not an instance of the Product class (i.e. tProduct instanceof Product === false ).

The reason Id is not an error, because JSON.parse returns an object with the Id property.

To learn how to deserialize a TypeScript type, you can check the following answer: How to initialize a TypeScript object using a JSON object

+1
source

More articles:


All Articles