CODEWITHSUNDEEP
javascriptfunctiontypescriptundefined
frank
frank

Reputation: 1247

Typescript - TypeError myclass.myFunction is not a function

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"
    ]
}

Upvotes: 50

Views: 91644

Answers (5)

maxpaj
maxpaj

Reputation: 6791

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

Upvotes: 7

Ulysses Alves
Ulysses Alves

Reputation: 2469

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

Upvotes: 1

Oleg Lemeshenko
Oleg Lemeshenko

Reputation: 78

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.

Upvotes: 0

Nypan
Nypan

Reputation: 7246

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.

Upvotes: 41

Dustin Hodges
Dustin Hodges

Reputation: 4195

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

Upvotes: 1

Related Questions