Enhancing class functionality with decorators in TypeScript

Question

Enhancing class functionality with decorators in TypeScript

Over on the TypeScript's Decorator reference page, there is a code snippet showcasing how to override a constructor with a class decorator:

function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
    return class extends constructor {
        newProperty = "new property";
        hello = "override";
    }
}

@classDecorator
class Greeter {
    property = "property";
    hello: string;
    constructor(m: string) {
        this.hello = m;
    }
}

console.log(new Greeter("world"));

Which logs the following:

class_1 {
  property: 'property',
  hello: 'override',
  newProperty: 'new property' }

All seems fine so far. However, attempting to access newProperty using dot notation results in the error message:

Property 'newProperty' does not exist on type 'Greeter'.ts(2339)

The error is not listed in hints from VS Code and accessing it with bracket notation prompts the warning:

Element implicitly has an 'any' type because type 'Greeter' has no index signature.ts(7017)

Is something missing here? How can one implement adding new properties via Decorators in a type-safe manner? The goal is to have proper compiler support similar to regular class members.

typescript decorator mixins

Answer 1

Answer №1

When it comes to decorators, they are unable to change the class type by design. Currently, there is an ongoing discussion about this limitation, and it seems that the behavior will remain unchanged until the decorator proposal is finalized. A possible alternative for achieving similar functionality is through the use of mixins (you can learn more about mixins in TypeScript here)

If we were to implement the above code using mixins, it would resemble something like this:

function classDecorator<T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        newProperty = "new property";
        hello = "override";
    }
}

const Greeter = classDecorator(class {
    property = "property";
    hello: string;
    constructor(m: string) {
        this.hello = m;
    }
});
type Greeter = InstanceType<typeof Greeter> // obtain the instance type just as if we had declared a class

console.log(new Greeter("world").newProperty);

Answer 2

When it comes to decorators, they are unable to change the class type by design. Currently, there is an ongoing discussion about this limitation, and it seems that the behavior will remain unchanged until the decorator proposal is finalized. A possible alternative for achieving similar functionality is through the use of mixins (you can learn more about mixins in TypeScript here)

If we were to implement the above code using mixins, it would resemble something like this:

function classDecorator<T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        newProperty = "new property";
        hello = "override";
    }
}

const Greeter = classDecorator(class {
    property = "property";
    hello: string;
    constructor(m: string) {
        this.hello = m;
    }
});
type Greeter = InstanceType<typeof Greeter> // obtain the instance type just as if we had declared a class

console.log(new Greeter("world").newProperty);

Answer 3

Answer №2

function addNewProperty<T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        extraProperty = "new addition";
        greet = "override";
    }
}
interface additionalProperties {
    newProperty: string;
    greet: string;
}

//trick
interface Greeting extends additionalProperties { };

@addNewProperty
class Greeting {
    property = "existing property";
    greet: string;
    constructor(message: string) {
        this.greet = message;
    }
}
const instance = new Greeting();
console.log(instance.extraProperty);

Utilizing the interface trick seems to be a viable solution for the current issue. For more details on this approach, refer to:

Answer 4

function addNewProperty<T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        extraProperty = "new addition";
        greet = "override";
    }
}
interface additionalProperties {
    newProperty: string;
    greet: string;
}

//trick
interface Greeting extends additionalProperties { };

@addNewProperty
class Greeting {
    property = "existing property";
    greet: string;
    constructor(message: string) {
        this.greet = message;
    }
}
const instance = new Greeting();
console.log(instance.extraProperty);

Utilizing the interface trick seems to be a viable solution for the current issue. For more details on this approach, refer to:

Answer 5

Answer №3

Here's a clever workaround for dealing with the limitations of decorators: Instead of using decorators directly, you can create a plain class that will properly inherit types.

class CustomClass {
        newProperty = "new property";
        greeting = "override";
}

class Person extends CustomClass {
    property = "property";
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
}

console.log(new Person("Hello, world!"));

Answer 6

Here's a clever workaround for dealing with the limitations of decorators: Instead of using decorators directly, you can create a plain class that will properly inherit types.

class CustomClass {
        newProperty = "new property";
        greeting = "override";
}

class Person extends CustomClass {
    property = "property";
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
}

console.log(new Person("Hello, world!"));

Enhancing class functionality with decorators in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

NextJS compilation sometimes results in undefined errors when using Sass styles

Issue with Angular2: The [routerLinkActive] directive does not update when using _router.navigate

Leveraging Angular Firebase MatTable with the power of 2 observables in 1

Angular rxjs Distinctions

angular2 ngif does not effectively conceal HTML elements when set to false

It is advisable for the subscriber not to halt upon encountering an error within the

The ngxpagination template is currently experiencing issues with filtering and pagination functionality

Tips for navigating to a specific item in a react native list?

When making a variable call outside of a subscriber function, the returned value is 'undefined'

Attempting to transfer files to and from Firebase storage

Develop an rxjs pipeline that merges values according to their type prior to executing them in an async manner using concatMap

Guide to making a Typescript type guard for a ReactElement type

Are all components in Next.js considered client components by default?

I am encountering an issue regarding the 'endpoint' property within my environment.ts file while working on an Angular 17 project

Verify if a given string exists within a defined ENUM in typescript

Compilation error in VueJS: missing dependency detected

What is the best way to retrieve the file path of a imported Angular module?

How can I use the target type (and maybe even the property type) as a type parameter within a decorator?

Error: the variable is not defined in the "onclick" event

ReactJS: A single digit input may result in the display of numerous '0's