未捕获（承诺）：TypeError: myFunction is not a function

Question

我第一次遇到这个问题，我认为这是因为 promise 在这里等待。 有人知道怎么修这个东西吗？ 我将发生错误的代码部分，整个 class 和错误放在底部。

部分代码有错误：

this.languages = await this.languageService.getAll().toPromise()

    this.languages.forEach(async (language) => {
      this.languageOption = new DropdownOption

      this.languageOption.set (
        language.getName(),
        language.getId()
      )

语言 class：

export class Language {
    private id: number;
    private name: string;
    private code: string;
    private charset: string;
    private isDefault: boolean;
    private isActive: boolean;
    private systemId: number;

    public constructor() {
        this.id = null;
        this.name = '';
        this.code = '';
        this.charset = '';
        this.isDefault = false;
        this.isActive = false;
        this.systemId = null;
    }

    public set(
        _id: number,
        _name: string,
        _code: string,
        _charset: string,
        _isDefault: boolean,
        _isActive: boolean,
        _systemId: number
    ) {
        this.id = _id;
        this.name = _name;
        this.code = _code;
        this.charset = _charset;
        this.isDefault = _isDefault;
        this.isActive = _isActive;
        this.systemId = _systemId;
    }

    public getId(): number {
        return this.id;
    }

    public getName(): string {
        return this.name;
    }

    public getCode(): string {
        return this.code;
    }

    public getCharset(): string {
        return this.charset;
    }

    public getIsDefault(): boolean {
        return this.isDefault;
    }

    public getIsActive(): boolean {
        return this.isActive;
    }

    public getSystemId(): number {
        return this.systemId;
    }

    public setId(_id: number): void {
        this.id = _id;
    }

    public setName(_name: string): void {
        this.name = _name;
    }

    public setCode(_code: string): void {
        this.code = _code;
    }

    public setCharset(_charset: string): void {
        this.charset = _charset;
    }

    public setIsDefault(_isDefault: boolean): void {
        this.isDefault = _isDefault;
    }

    public setIsActive(_isActive: boolean): void {
        this.isActive = _isActive;
    }

    public setSystemId(_systemId: number): void {
        this.systemId = _systemId
    }
}

错误：

未捕获（承诺）：TypeError：language.getName 不是 function TypeError：language.getName 不是 function

Answer 1

在forEach中尝试定义每个数组元素的类型。

另外，尝试添加一个 if 条件，以确保您不会出错。

像这样的东西：

this.languages.forEach(async (language: Language) => {
  if (language) {
    // Write your code here. 
  }
})

如果您在上述实现中遇到错误，则意味着languages没有返回Language的数组。 所以你必须 map 它然后使用forEach

Answer 2

问题是您的服务不返回Language class 的对象，而是返回与 class 具有相同结构的对象。

（class 看起来是由 Java 开发人员创建的，所以我的建议中的 rest 将基于该假设）

在 Java 中，对象（通常）是通过调用构造函数来创建的。 另一方面，JavaScript 中的对象通常由 object 文字语法{...}创建。 其结果是，虽然在 Java 中构造函数是一个急需的工具，但在 JavaScript 中，构造函数（甚至类）大多是无用的，尤其是在数据传输场景中。

因此，为了获得惯用的（即好的）TypeScript 代码，我建议完全删除 class 并切换到接口：

export interface Language {
    id: number;
    name: string;
    code: string;
    charset: string;
    isDefault: boolean;
    isActive: boolean;
    systemId: number;
}

现在，与必须正式声明才能使用的 Java 接口不同，TypeScript 接口是结构化的。 这意味着任何具有这些字段的 object 就所有意图和目的而言都是Language 。 是的，这意味着我们可以有一个 object，它被构造为文字并被认为实现了一个接口。 （这就是为什么 TypeScript 中的接口通常没有I前缀的原因）

此外，不要担心对字段的未封装访问。 有些人可能认为这很疯狂，但在 JS 领域我们可以接受 :)

现在，如果我们假设languageService.getAll().toPromise()返回一个Language对象数组（同样是接口，而不是类），我们可以像这样编写所需的代码：

this.languages = await this.languageService.getAll().toPromise()

//using for..of, as I hate forEach
for (const language of this.languages) {
  // ....
  this.languageOption.set(
    language.name,
    language.id
  );
  // ...
}