Trouble Loading TypeScript Class in Cast Situation

Question

Trouble Loading TypeScript Class in Cast Situation

I've encountered an issue with my TypeScript model while using it in a cast. The model does not load properly when the application is running, preventing me from accessing any functions within it.

Model

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 Component (Where model is being imported)

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

javascript angularjs typescript

Answer 1

Answer №1

When you use a type assertion in TypeScript, you are essentially informing the compiler about the type of a variable. In the case mentioned, event.target is being asserted as type DataIDElement, but it doesn't create a new instance of DataIDElement.

To actually instantiate a new object of type DataIDElement, you would need to use the new keyword.

An example implementation of DataIDElement could be:

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

This is how you could use DataIDElement:

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

Answer 2

When you use a type assertion in TypeScript, you are essentially informing the compiler about the type of a variable. In the case mentioned, event.target is being asserted as type DataIDElement, but it doesn't create a new instance of DataIDElement.

To actually instantiate a new object of type DataIDElement, you would need to use the new keyword.

An example implementation of DataIDElement could be:

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

This is how you could use DataIDElement:

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

Trouble Loading TypeScript Class in Cast Situation

Answer №1

Similar questions

Executing Java Script on several identical elements

Guidelines for implementing more rigorous type checks in TypeScript:

How to Ensure Screen Opens in Landscape Mode with Phaser3

I am looking to generate an array with key-value pairs from an object that will be seen in the examination

Display options through numerical selection

Align the body of the table with the header after populating the table with values

Implementing real-time time updates using php ajax technology

Store the content of an HTML div using HTML5 Drag and Drop functionality in a MYSQL database

UI-Router: What is the best way to access a page within my project without adding it as a State?

Issue with dynamically filling a form field using ValidityState

The Clerk authMiddleware() function has been defined in the middleware.ts file located at the root of the application, but it is not being utilized

Element eradicated by mysterious force - what is the reason behind this destruction?

Why bother re-rendering components in React that haven't had any changes in their state?

Having trouble with integrating Firebase and Vue database

The functionality of Material UI tooltip is not functioning properly when accessed on mobile devices

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

Why am I getting the "Cannot locate control by name" error in my Angular 9 application?

`Optimizing Django by using multiple room relationships to save formset related models`

Setting up JavaScript imports in Next.js may seem tricky at first, but with

Ways to simulate file operations in sinon?