Typescript

Question

我遇到了以下代码的问题。

它基本上应该做什么。它应该加载并解析给定的 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"
    ]
}

Answer 1

我不熟悉 TypeScript，但查看编译后的 JavaScript，我注意到 tProduct 只是一个 POJO，而不是 Product class 的实例（即 tProduct instanceof Product === false).

Id 不报错的原因是因为 JSON.parse returns 一个 Id 为属性的对象。

要了解如何反序列化为 TypeScript 类型，您可以查看以下答案：How do I initialize a typescript object with a JSON object

Answer 2

行：

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

错了。它编译的原因只是由于 JSON.parse returning any.

要使用 class Product，您必须以某种方式创建它的实例。 JSON parse 不会这样做，它只是 return 一个包含已解析 JSON 的对象，它不会是 pvis.Product class 的实例.

如果您想做的是键入 JSON 结果，您可以使用界面来完成。例如，如果您在表单上有一个 JSON 对象：

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

您可以使用界面输入：

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

然后像这样使用它：

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

这样创建的对象将永远不会有方法，但是，如果您想要该功能，则必须将此信息传递给 class 以某种方式使用它，例如；

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 了解更多有关其工作原理的信息。

Answer 3

我遇到了这个错误，这是由于 我的文件中存在循环依赖关系。

fileA.ts

import { foo } from "./fileB"

export function bar() { ... }

foo();

fileB.ts

import { bar } from "./fileA"

export function foo() { ... }

bar();

这会产生：

TypeError: fileA_1.foo is not a function

Answer 4

您可以使用接口方法创建一个class。

interface IMyInterface() {
}

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

可能有替代解决方案 - Mixins。

Typescript - TypeError myclass.myFunction 不是一个函数

Typescript - TypeError myclass.myFunction is not a function

javascript

function

undefined