Typescript - TypeError myclass.myFunction不是函數

我正遇到以下代碼的問題。Typescript - TypeError myclass.myFunction不是函數

它基本上應該做什麼。它應該加載並解析給定的JSON文件。並且在RequestListender中，它應該顯示ID和由ToString()方法在Product.ts返回的字符串Hello。如果tProduct.Id顯示正確，則tProduct.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部分：

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

編譯的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" 
    ] 
}

來源

2015-12-01 FrW

行：

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

這個的工作示例可以找到here。

您可能要查找如何與打字稿接口和JSON工作，學習更多的關於如何工作的。

來源

2015-12-01 23:00:48 Nypan

界面方法是我的第一步。幾乎像你發佈它。我剛剛從樣本中移除它以縮短它。 – FrW

對不起...我在這裏很新（按Enter鍵），所以這裏是完整的答案：界面方法是我的第一個要求。幾乎像你發佈它。我剛剛從樣本中刪除了它，以便縮短它的時間，因爲界面不是問題的一部分。正如你和@ Dustin-Hodges所說的那樣，問題出在JSON.parse上，並且不會創建實例。我正在假設。 **感謝您的支持**並給我正確的方向。 – FrW

沒問題，我更新了我的答案，修復了我的代碼中的一些錯誤，並提供了一個運行示例。樂意效勞！ – Nypan

我不熟悉TypeScript，但看着編譯的JavaScript，我注意到tProduct i只是一個POJO，而不是Product類的一個實例（即tProduct instanceof Product === false）。

Id沒有錯誤的原因是因爲JSON.parse返回一個具有Id屬性的對象。

要了解如何反序列化到打字稿類型，你可以檢查以下答案：How do I initialize a typescript object with a JSON object

來源

2015-12-01 22:35:40

Typescript - TypeError myclass.myFunction不是函數

回答

相關問題