What are the best strategies for combining multiple TypeScript class decorators?

Question

What are the best strategies for combining multiple TypeScript class decorators?

I have a set of unique class decorators that I apply to multiple classes. It looks something like this:

@awesome
@cool
@amazing
export class MySpecialClass { /* ..... */ }

However, since I use these three decorators across many classes, I want to condense them into one decorator like this:

@super
export class MySpecialClass { /* ... */ }

I attempted to create a new decorator that chains the calls like so:

export function super<ReturnType>(ctor: Constructor<ReturnType>) {
    return amazing(cool(awesome(ctor)));
}

According to the TypeScript documentation, applying multiple decorators should work similarly to function composition, which is why I thought chaining them would be possible. But when compiling (using TypeScript 1.8), I encountered an error message like this:

Unable to resolve signature of class decorator when called as an expression. Type 'Constructor<ReturnType>' is not assignable to type 'void'.

Is there a way for me to create this 'wrapper' decorator to streamline my code?

typescript typescript-decorator

Answer 1

Answer №1

After realizing where I went wrong while trying to present a more thorough version of my problem to @David, I have come to a solution.

Here is a complete example:

interface Constructor<T> { new(...args: any[]): T }
interface A { a: number; }
interface B { b: number; }
interface C { c: number; }

function foo(Target: Constructor<A>): Constructor<A>{ 
    // do something to the constructor
    return Target;
}
function bar(Target: Constructor<B>): Constructor<B> { 
    // do something to the constructor
    return Target;
}
function baz(Target: Constructor<C>): Constructor<C> {
    // .....
    return Target;
}

function standard(ctor: Constructor<A & B & C>): Constructor<A & B & C> {
    return baz(bar(foo(ctor)));
}

@foo
@bar
@baz
class MyClass implements A, B, C { a=1;b=2;c=3;d=6; }

There was some implicit typing in my actual code that somewhat hid the issue from me. It seems I misinterpreted the compiler output.

The issue was with how I defined my decorators:

function foo(Target: Constructor<A>): Constructor<A> { }

It should have been:

function foo<T extends A>(Target: Constructor<T>): Constructor<T> {}

I observed that setting the return types in the decorators to any resolved the compile errors. The additional generic parameter allowed the type information to flow smoothly through the decorators. Otherwise, it seemed like Constructor<MyClass> could not be assigned an instance of Constructor<A> (since A lacked the other interfaces). Interestingly, I encountered more errors in the decorators when I added the declaration of d in MyClass.

In conclusion - exercise caution with generics when working with class decorators, or opt to return any.

Answer 2

After realizing where I went wrong while trying to present a more thorough version of my problem to @David, I have come to a solution.

Here is a complete example:

interface Constructor<T> { new(...args: any[]): T }
interface A { a: number; }
interface B { b: number; }
interface C { c: number; }

function foo(Target: Constructor<A>): Constructor<A>{ 
    // do something to the constructor
    return Target;
}
function bar(Target: Constructor<B>): Constructor<B> { 
    // do something to the constructor
    return Target;
}
function baz(Target: Constructor<C>): Constructor<C> {
    // .....
    return Target;
}

function standard(ctor: Constructor<A & B & C>): Constructor<A & B & C> {
    return baz(bar(foo(ctor)));
}

@foo
@bar
@baz
class MyClass implements A, B, C { a=1;b=2;c=3;d=6; }

There was some implicit typing in my actual code that somewhat hid the issue from me. It seems I misinterpreted the compiler output.

The issue was with how I defined my decorators:

function foo(Target: Constructor<A>): Constructor<A> { }

It should have been:

function foo<T extends A>(Target: Constructor<T>): Constructor<T> {}

I observed that setting the return types in the decorators to any resolved the compile errors. The additional generic parameter allowed the type information to flow smoothly through the decorators. Otherwise, it seemed like Constructor<MyClass> could not be assigned an instance of Constructor<A> (since A lacked the other interfaces). Interestingly, I encountered more errors in the decorators when I added the declaration of d in MyClass.

In conclusion - exercise caution with generics when working with class decorators, or opt to return any.

Answer 3

Answer №2

Here is a possible way to format it:

function exportOne(target: any)
{
    return target;
}

function exportTwo(target: any)
{
    return target;
}

function exportThree(target: any)
{
    return target;
}

function standardFunction<T>() 
{
    return (target: { new(): T}) =>
    {
        return exportOne(exportTwo(exportThree(target)));
    }
}

@exportOne
@exportTwo
@exportThree
export class MyClassExample  { /* ... */ }

@standardFunction<MyClassExample>()
export class MyClassAExample { /* ... */ }

Answer 4

Here is a possible way to format it:

function exportOne(target: any)
{
    return target;
}

function exportTwo(target: any)
{
    return target;
}

function exportThree(target: any)
{
    return target;
}

function standardFunction<T>() 
{
    return (target: { new(): T}) =>
    {
        return exportOne(exportTwo(exportThree(target)));
    }
}

@exportOne
@exportTwo
@exportThree
export class MyClassExample  { /* ... */ }

@standardFunction<MyClassExample>()
export class MyClassAExample { /* ... */ }

What are the best strategies for combining multiple TypeScript class decorators?

Answer №1

Answer №2

Similar questions

Using TypeScript, add an observable to an array of observables using RxJS

The letter 'X' is not suitable for use as a JSX component because its return type 'Element[]' does not qualify as a valid JSX element

There seems to be a console error in Angular 5 when using IE 11

When attempting to print a Rectangle on my webpage using JavaScript and taking user input, I encountered an error stating that 'str' is not defined

Leveraging the power of React's callback ref in conjunction with a

Steer clear of using inline styling when designing with Mui V5

Can you explain the step-by-step process of how an await/async program runs in TypeScript/JavaScript or Python?

I would appreciate it if someone could explain the significance of the image display area

Setting angular variables by assigning form values

Why did my compilation process fail to include the style files despite compiling all other files successfully?

Incorrect typings being output by rxjs map

What is the reason TypeScript struggles to automatically deduce assignments of identical object types?

Encountering a problem with lazy loading of module routing paths. Issue arises when attempting to navigate to http://localhost:4200

Refreshing Form in Angular 2

Unclear error message when implementing union types in TypeScript

Issue: Failed to access the 'setDir' property of an undefined object

Aggregate the values in an array and organize them into an object based on their frequency

React: Why aren't class methods always running as expected?

Troubleshooting the issue of having multiple menu items in Material UI

Attempting to perform an API invocation on a distant endpoint utilizing NestJS