web-dev-qa-db-ja.com

Typescript-TypeError myclass.myFunctionは関数ではありません

次のコードの問題に直面しています。

基本的にすべきこと。指定されたJSONファイルをロードして解析する必要があります。そして、RequestListenderで、IDと、Product.tsのToString()メソッドによって返される文字列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');
    }

}
_

File 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"
    ]
}
_
javascriptfunctiontypescriptundefined
23
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 にあります。

TypeScriptインターフェースとJSONの操作方法を調べて、これがどのように機能するかについてもう少し学ぶことができます。

18
Nypan

私はTypeScriptに精通していませんが、コンパイルされたJavaScriptを見ると、tProductはPOJOであり、Productクラスのインスタンスではありません（つまり、tProduct instanceof Product === false）。

Idがエラーにならない理由は、JSON.parseがIdプロパティを持つオブジェクトを返すためです。

TypeScript型にデシリアライズする方法を確認するには、次の答えを確認できます。 JSONオブジェクトでTypeScriptオブジェクトを初期化する方法

1
Dustin Hodges