Tips for incorporating a fresh attribute into a class through a class decorator

Question

Tips for incorporating a fresh attribute into a class through a class decorator

Looking to add a new property to a class using a class decorator?

Here's an example:

@MyClassDecorator
class MyClass {
    myFirstName: string;
    myLastName: string;
}

// Need to achieve something like this:
function MyClassDecorator (target: any): any {
    target['myNickname'] = 'Gambler';
}

let myClass = new MyClass();
console.log(myClass['myNickname']); // Expecting "Gambler" but receiving "undefined"

How can we troubleshoot this issue?

Can a property be added to a class using a decorator?

Appreciate your insights!

typescript

Answer 1

Answer №1

In order to achieve the desired result, it is important to add the property to the prototype rather than the constructor:

function MyClassDecorator(target: any): any {
    target.prototype.myNickname = "Gambler";
}

While this approach will give you what you want, TypeScript may raise a complaint when trying to access this property:

let myClass = new MyClass();
console.log(myClass.myNickname); // error: Property 'myNickname' does not exist on type 'MyClass'

An alternative solution could be:

function myClassFactory(): MyClass & { myNickname: string } {
    return new MyClass() as MyClass & { myNickname: string };
}

let myClass = myClassFactory();
console.log(myClass.myNickname); // works without issues

(try in playground)

Answer 2

In order to achieve the desired result, it is important to add the property to the prototype rather than the constructor:

function MyClassDecorator(target: any): any {
    target.prototype.myNickname = "Gambler";
}

While this approach will give you what you want, TypeScript may raise a complaint when trying to access this property:

let myClass = new MyClass();
console.log(myClass.myNickname); // error: Property 'myNickname' does not exist on type 'MyClass'

An alternative solution could be:

function myClassFactory(): MyClass & { myNickname: string } {
    return new MyClass() as MyClass & { myNickname: string };
}

let myClass = myClassFactory();
console.log(myClass.myNickname); // works without issues

(try in playground)

Tips for incorporating a fresh attribute into a class through a class decorator

Answer №1

Similar questions

A more efficient method for refreshing Discord Message Embeds using a MessageComponentInteraction collector to streamline updates

A step-by-step guide on updating a deprecated typings package manually

What is the best way to integrate AWS-Amplify Auth into componentized functions?

TypeScript React Object.assign method return type

What are the steps to resolve warnings in an imported json file?

Is it possible to make my Toggle/Click event refresh the entire component every time it is clicked?

Encountering a "undefined response" issue within an Angular

What's the best way to replicate a specific effect across multiple fields using just a single eye button?

Error notifications continue to appear despite the presence of data in the input field

What is the best way to modify specific data retrieved from an API using Angular?

Ways to address a buffered data problem in Websocket Rxjs. When trying to send a message, it is not being received by the server and instead is being stored in a

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

The input type '{}' does not match the expected type 'Readonly<IIdeasContainerProps>'. The property '...' is not found in the type '{}'

Unique text: "Singleton React component"

Eliminate using a confirmation popup

Definitions for Typescript types that describe a custom hook responsible for fetching a specific part of the Redux state

Reorganizing Firebase data in Ionic 2

Firebase Function deployment encountered an issue during the build phase, despite the predeploy process

Step-by-step guide for importing a JSON file in React typescript using Template literal

Form with checkboxes in a Next.js and Typescript application