javascript - TypeScript 类在强制转换中使用但未加载

Question

我已经在 TypeScript 中创建了一个模型，并在强制转换中使用它。运行应用程序时，模型未加载，我无法使用该模型上的任何功能。

型号

export class DataIDElement extends HTMLElement {
    get dataID(): number {
        var attributes: NamedNodeMap = this.attributes;
        var dataIDAttribute: Attr = attributes.getNamedItem("data-id");

        if (!dataIDAttribute) { 
            //throw error
        }

        var value: number = Number(dataIDAttribute.value);
        return value;
    }
}

Angular 组件(模型导入位置)

import { DataIDElement } from '../../models/dataIdElement';

export class PersonComponent
{
    personClicked(event: KeyboardEvent): void {
        var element: DataIDElement = <DataIDElement>event.target;

        // This code always returns undefined (model isn't loaded)
        var personID: number = element.dataID;
    }
}

Answer 1

你正在做的是类型断言。这只会覆盖编译器的类型推断，使其相信 event.target 属于 DataIDElement 类型。它不会创建 DataIDElement 的新实例。

如果您想创建 DataIDElement 实例，则需要使用 new 创建它。

DataIDElement 看起来像这样:

export class DataIDElement extends HTMLElement {
    constructor(private target: HTMLElement) {}
    get dataID(): number {
        var attributes: NamedNodeMap = this.target.attributes;
        var dataIDAttribute: Attr = attributes.getNamedItem("data-id");

        if (!dataIDAttribute) { 
            //throw error
        }

        var value: number = Number(dataIDAttribute.value);
        return value;
    }
}

并且会像这样使用:

import { DataIDElement } from '../../models/dataIdElement';

export class PersonComponent
{
    personClicked(event: KeyboardEvent): void {
        var element: DataIDElement = new DataIDElement(event.target);

        // This code always returns undefined (model isn't loaded)
        var personID: number = element.dataID;
    }
}