Typescript - TypeError myclass.myFunction不是函数

我遇到以下代码的问题.

它基本上应该做什么.它应该加载和解析给定的JSON文件.在RequestListender中,它应该显示Product.ts中方法返回ID的字符串和字符串.在正确显示的地方,该方法失败并出现下述错误.HelloToString()tProduct.IdtProduct.ToString()

非常感谢提前.

错误信息:

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

文件: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

module pvis {
    export class Product {

        Id: string;

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

HTML部分:

编译好的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(我不确定它是否相关):

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

Nypan.. 19

这条线:

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

是错的.它编译的原因仅仅是JSON.parse归还any.

使用Product你必须以某种方式创建它的实例的类.JSON解析不会这样做,它只会返回一个带有解析后的JSON的对象,它不会是pvis.Product该类的实例.

如果您要执行的操作是键入JSON结果,则可以使用界面执行此操作.例如,如果表单上有JSON对象:

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

您可以使用界面键入:

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

并像这样使用它:

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

像这样创建的对象永远不会有方法,但是如果你想要这个功能,你必须将这些信息传递给一个可以使用它的类,例如;

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;
    }
}

这方面的工作示例可以在这里找到.

您可能希望查找如何使用typescript接口和JSON来更多地了解其工作原理.

这条线:

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

是错的.它编译的原因仅仅是JSON.parse归还any.

使用Product你必须以某种方式创建它的实例的类.JSON解析不会这样做,它只会返回一个带有解析后的JSON的对象,它不会是pvis.Product该类的实例.

如果您要执行的操作是键入JSON结果,则可以使用界面执行此操作.例如,如果表单上有JSON对象:

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

您可以使用界面键入:

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

并像这样使用它:

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

像这样创建的对象永远不会有方法,但是如果你想要这个功能,你必须将这些信息传递给一个可以使用它的类,例如;

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;
    }
}

这方面的工作示例可以在这里找到.

您可能希望查找如何使用typescript接口和JSON来更多地了解其工作原理.