Typescript - 类型错误：myclass.myFunction不是一个函数。

Question

Typescript - 类型错误：myclass.myFunction不是一个函数。

49

我在以下代码中遇到了一些问题。

它基本上应该做什么。它应该加载和解析给定的JSON文件。并且在RequestListener中，它应该显示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');
    }

}

产品文件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"
    ]
}

- frank

5个回答

5

我遇到了这个错误，原因是我的文件中存在循环依赖。我将这两个函数放在同一个文件中，问题得到解决。

fileA.ts

import { foo } from "./fileB"

export function bar() { ... }

foo();

fileB.ts

import { bar } from "./fileA"

export function foo() { ... }

bar();

这会产生以下结果：

TypeError: fileA_1.foo 不是一个函数

- maxpaj

那么解决方案是什么？ - Diego

将它们放在同一个文件中，或重新考虑你的文件结构。 - maxpaj

1

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

Id不报错的原因是因为JSON.parse返回一个具有Id属性的对象。

要了解如何反序列化为TypeScript类型，您可以查看以下答案：如何使用JSON对象初始化TypeScript对象。

- Dustin Hodges

1

我之所以出现了这个错误，是因为对象使用的表示法是<ClassName>{}。当我将其更改为new ClassName()后，问题得到解决。

- Ulysses Alves

0

你可以创建一个带有接口方法的类。

interface IMyInterface() {
}

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

可能有一种替代方案 - Mixins。

- Oleg Lemeshenko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nypan · Accepted Answer

这行代码：

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 的资料，以了解更多相关信息。