Класс 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; 
    } 
} 

Угловой компонент (где модель импортируется)

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 вам нужно создать его с помощью нового.

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; 
    } 
}