What is causing the error TS2339 to be thrown when attempting to access a class property in this TypeScript illustration: "Property 'text' does not exist on type 'T'"?

Question

What is causing the error TS2339 to be thrown when attempting to access a class property in this TypeScript illustration: "Property 'text' does not exist on type 'T'"?

Could someone provide insight into why attempting to access a class property in this scenario is resulting in the error message

error TS2339: Property 'text' does not exist on type 'T'.

Here is the TypeScript code:

class Base {
    readonly name: string = this.constructor.name;
};

class MyClass extends Base {
    text: string;

    constructor(v: string) {
        super();
        this.text = v;
    }
};

function CreateMyClass<T>(type: new (v: string) => T) {
    console.debug('CreateMyClass: type:', type)

    const myClass: T = new type('hello world');

    console.debug('CreateMyClass: myClass:', myClass);
    // console.debug('CreateMyClass: myClass.text:', myClass.text);
}

CreateMyClass(MyClass);

The output is as follows:

CreateMyClass: type: [class MyClass extends Base]
CreateMyClass: myClass: MyClass { name: 'MyClass', text: 'hello world' }

If we uncomment the last console.debug statement, the output displays the error:

test/index.ts:20:59 - error TS2339: Property 'text' does not exist on type 'T'.

20     console.debug('CreateMyClass: myClass.text:', myClass.text);
                                                             ~~~~

typescript narrowing

Answer 1

Answer №1

Both @CodingGenius and @programmingpro provided insights on my initial query. It was confirmed by @CodingGenius that my question was actually an example of the "XY Problem".

SOLUTION: "...You're encountering an issue where the TS type is not stored as it only exists during compile time. It's important to note that the type 'T' may not necessarily contain text, as illustrated in my previous comment." – @CodingGenius

As for my primary concern, "Is it possible to modify a property instantiated by the function CreateMyClass?" - The answer is no.

I previously mentioned my quest for a resolution to a different issue:

The challenge of retrieving an element of type T (where T is a subclass of BaseClass) from an array of objects of the class BaseClass, using a function that takes the derived class as input. The following code snippet exemplifies this:

class Base {
    readonly name: string = this.constructor.name;
};

class MyClass extends Base {
    text: string;

    constructor(val: string) {
        super();
        this.text = val;
    }
};

class MyContainer {
    arr: Base[] = [];

    getChild<T>(childType: new (s: string) => T): T {
        for (const child of this.arr) {
            if (child instanceof childType) {
                return child;
            }
        }

        return undefined;
    }
}

const myContainer: MyContainer = new MyContainer();
myContainer.arr.push(new MyClass('some value'));

console.debug(myContainer.getChild(MyClass));

Output of console.debug:

MyClass { text: "some value" }

In the end, I managed to find a solution to the core problem. I hope this serves as a useful guide for others delving into TypeScript.

A big thank you to @CodingGenius and @programmingpro for their valuable assistance.

Answer 2

Both @CodingGenius and @programmingpro provided insights on my initial query. It was confirmed by @CodingGenius that my question was actually an example of the "XY Problem".

SOLUTION: "...You're encountering an issue where the TS type is not stored as it only exists during compile time. It's important to note that the type 'T' may not necessarily contain text, as illustrated in my previous comment." – @CodingGenius

As for my primary concern, "Is it possible to modify a property instantiated by the function CreateMyClass?" - The answer is no.

I previously mentioned my quest for a resolution to a different issue:

The challenge of retrieving an element of type T (where T is a subclass of BaseClass) from an array of objects of the class BaseClass, using a function that takes the derived class as input. The following code snippet exemplifies this:

class Base {
    readonly name: string = this.constructor.name;
};

class MyClass extends Base {
    text: string;

    constructor(val: string) {
        super();
        this.text = val;
    }
};

class MyContainer {
    arr: Base[] = [];

    getChild<T>(childType: new (s: string) => T): T {
        for (const child of this.arr) {
            if (child instanceof childType) {
                return child;
            }
        }

        return undefined;
    }
}

const myContainer: MyContainer = new MyContainer();
myContainer.arr.push(new MyClass('some value'));

console.debug(myContainer.getChild(MyClass));

Output of console.debug:

MyClass { text: "some value" }

In the end, I managed to find a solution to the core problem. I hope this serves as a useful guide for others delving into TypeScript.

A big thank you to @CodingGenius and @programmingpro for their valuable assistance.

What is causing the error TS2339 to be thrown when attempting to access a class property in this TypeScript illustration: "Property 'text' does not exist on type 'T'"?

Answer №1

Similar questions

Typescript integration with Sequelize CLI for efficient database migrations

Leveraging Typescript's robust type system to develop highly specific filter functions

Having trouble utilizing a JavaScript file within TypeScript

Is it possible to obtain Literal types for object keys dynamically in typescript?

Is it possible to set up TypeScript npm packages to be installed in their original TypeScript format rather than JavaScript for the purpose of examining the source code?

What is the reason behind decorators needing to utilize apply(this) on a function?

Navigating the interface types between Angular, Firebase, and Typescript can be tricky, especially when working with the `firebase.firestore.FieldValue`

Assigning the output of a function to an Angular2 component (written in TypeScript)

What is the best way to extract values from a specific table column and store them in an array using Angular?

What is the best way to first identify and listen for changes in a form

"Utilizing Typescript and React to set a property's value based on another prop: A step-by

Angular Error: Attempting to access property 'then' of undefined object causes TypeError

Sharing information between components in Angular through service communication

I am curious if there exists a VSCode plugin or IDE that has the ability to show the dependencies of TypeScript functions or provide a visual representation

Executing installed packages using npm: A step-by-step guide

Having trouble with the removeEventListener OnDestroy not functioning properly in Angular 6 using Javascript?

The TypeScript Type inside the Node Module Doesn't Seem to Be Functioning

Retrieving an array of objects from an API and attempting to store it using useState, but only receiving an empty

Implementing an interface with a variable key and defining the key simultaneously

Is there a way to get this reducer function to work within a TypeScript class?