Typescript - TypeError myclass.myFunction is not a function

Question

I'm facing an issue with the following code.

What it basically should do. It should load and parse a given JSON file. And in the RequestListender it should show the ID and the string Hello which is returned by the ToString() method in Product.ts. Where the tProduct.Id is shows up correctly, the tProduct.ToString() method fails with the error stated below.

Thanks a lot 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');
    }

}

File Product.ts

module pvis {
    export class Product {

        Id: string;

        ToString():string {
            return 'Hello';
        }
    }
}

The HTML part:

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

The 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');
    }
}

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

{
    "compilerOptions": {
        "target": "ES5",
        "removeComments": true,
        "preserveConstEnums": true,
        "out": "js/main.js",
        "sourceMap": true
    },
    "files": [
       "src/Test.ts"
    ]
}

Nypan · Accepted Answer · 2015-12-02T15:21:28.783

40

The line:

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

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

to use the class Product you have to create an instance of it somehow. JSON parse will not do this, it will simply return an object with the parsed JSON in it, it will not be an instance of the pvis.Product class.

If what you want to do is type the JSON result you can do that with an interface. For example if you have a JSON object on the form:

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

You can type that with the interface:

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

And use it like so:

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

An object created like that will never have methods however, if you want that functionality you have to pass this information in to a class that can use it some how, 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;
    }
}

Working example of this can be found here.

You might want to look up how to work with typescript interfaces and JSON to learn a bit more about how this works.

edited Dec 02 '15 at 15:21

answered Dec 01 '15 at 23:00

Nypan

6,980
3
21
28

The interface approach was my first take. Almost like you posted it. I've just removed it from the sample to keep it shorter. – frank Dec 01 '15 at 23:06
sorry ... I'm pretty new here (hit the Enter button) so here's the complete answer: The interface approach was my first take. Almost like you posted it. I've just removed it from the sample to keep it shorter because the interface wasn't part of the problem. As you and @Dustin-Hodges said, the issue is with the JSON.parse and that is doesn't creates an instance. Which I was assuming. **Thank you for the support** and giving me the right direction. – frank Dec 01 '15 at 23:14
No problem, i updated my answer to fix some errors in my code and provided a running example. Glad to help! – Nypan Dec 01 '15 at 23:18
Thanks. Now I have it working. I just had to make a slight change: the line `var myParsedAndTypedJson: myInterface = JSON.parse("....");` should be (then it is working pretty well): `var myParsedAndTypedJson: myInterface = new myClass(JSON.parse("...."));` – frank Dec 01 '15 at 23:41
1

Thank you! This helped me realize that my User object wasn't being passed in as an instance of its class. It was being passed in as a plain JS object of type User. That's why it was lacking all the methods of a real User object... man this kinda sucks about Typescript lol. – Sam Malayek Jan 02 '19 at 19:04

maxpaj · Answer 2 · 2023-04-05T06:06:14.880

5

I had this error and it was due to circular dependencies in my files. I put both those functions in the same file and that solved the issue.

fileA.ts

import { foo } from "./fileB"

export function bar() { ... }

foo();

fileB.ts

import { bar } from "./fileA"

export function foo() { ... }

bar();

This produces:

TypeError: fileA_1.foo is not a function

edited Apr 05 '23 at 06:06

answered Jun 06 '20 at 09:53

maxpaj

6,029
5
35
56

And what is the solution? – Diego Mar 24 '22 at 15:13
Put them both in the same file, or rethink your file structure. – maxpaj Mar 24 '22 at 16:12

score 1 · Answer 3 · edited May 23 '17 at 11:47

I'm not familiar with TypeScript, but looking at the 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 doesn't error is because JSON.parse returns an object with an Id property.

To see how to deserialize to a TypeScript type, you can check the following answer: How do I initialize a typescript object with a JSON object

Ulysses Alves · Answer 4 · 2022-10-14T20:47:16.353

1

I got this error because the object was being instantiated with notation <ClassName>{}. It worked after I changed this to new ClassName().

edited Oct 14 '22 at 20:47

answered Oct 14 '22 at 20:32

Ulysses Alves

2,297
3
24
34

score 0 · Answer 5 · answered Jun 22 '20 at 11:37

0

You can make a class with methods for the interface.

interface IMyInterface() {
}

class MyInterfaceMethods () {
     static MyMethod(IMyInterface data) {
    
     }
}

Probably there is an alternative solution - Mixins.

answered Jun 22 '20 at 11:37

Oleg Lemeshenko

68
4

Typescript - TypeError myclass.myFunction is not a function

5 Answers5