Sneaky decorator design pattern

Question

Sneaky decorator design pattern

I'm struggling to comprehend the code snippet provided below:

  export class Record{

  };

  export class RecordMissingExtendsError{
      constructor(r:any){

      }
  }

  export function Model() {
    return <T extends { new(...args: any[]): {} }>(ctr: T) => {
        if (!(ctr.prototype instanceof Record)) {
            throw new RecordMissingExtendsError(ctr);
        }

        return (class extends ctr {
            constructor(...args: any[]) {
                const [data] = args;
                if (data instanceof ctr) {
                    return data;
                }
                super(...args);
                (this as any)._completeInitialization();
            }
        });
    };
}

Trying to decipher the above code, I've grasped the following:

The Model function returns a type T, and it looks like

T extends { new(...args: any[]): {} }

What is the meaning behind

T extends { new(...args: any[]): {}

? Is T retaining existing properties while also incorporating additional features?

Furthermore, could you clarify the function's return type? Are we appending an extra constructor to T?

(class extends ctr {
            constructor(...args: any[]) {
                const [data] = args;
                if (data instanceof ctr) {
                    return data;
                }
                super(...args);
                (this as any)._completedInitialization();
            }
        });

typescript typescript2.0 typescript-generics typescript3.0

Answer 1

Answer №1

T extends { new(...args: any[]): {} }

specifies that T must be a constructor function, essentially a class. The specific arguments and return type of the constructor are not important (meaning T can have any number of arguments and may return any type that extends {}, essentially any object type).

When directly invoked, T represents the class itself. This typing approach for decorators is similar to mixins (read more about it in this link).

The result of invoking the function will be a new class that inherits from the decorated class. Instead of adding a constructor, the original one is replaced with a new constructor that calls the original using super.

In this context, the use of generics seems excessive. They are beneficial for mixins as they pass the original class from input parameter to output parameter and add members to the type. However, decorators cannot alter the type structure, so there is no need for forwarding. Additionally, rather than having the constructor return {}, it could be typed to return Record for runtime and compile-time checks:

export class Record{
    protected _completeInitialization(): void {}
};

export function Model() {
  return (ctr: new (...a: any[]) => Record ) => {
      if (!(ctr.prototype instanceof Record)) {
          throw new RecordMissingExtendsError(ctr);
      }

      return (class extends ctr {
          constructor(...args: any[]) {
              const [data] = args;
              if (data instanceof ctr) {
                  return data;
              }
              super(...args);
              this._completeInitialization(); // no assertion since constructor returns a record
          }
      });
  };
}

@Model()
class MyRecord extends Record { }

@Model()// compile time error, we don't extend Record
class MyRecord2  { }

Answer 2

T extends { new(...args: any[]): {} }

specifies that T must be a constructor function, essentially a class. The specific arguments and return type of the constructor are not important (meaning T can have any number of arguments and may return any type that extends {}, essentially any object type).

When directly invoked, T represents the class itself. This typing approach for decorators is similar to mixins (read more about it in this link).

The result of invoking the function will be a new class that inherits from the decorated class. Instead of adding a constructor, the original one is replaced with a new constructor that calls the original using super.

In this context, the use of generics seems excessive. They are beneficial for mixins as they pass the original class from input parameter to output parameter and add members to the type. However, decorators cannot alter the type structure, so there is no need for forwarding. Additionally, rather than having the constructor return {}, it could be typed to return Record for runtime and compile-time checks:

export class Record{
    protected _completeInitialization(): void {}
};

export function Model() {
  return (ctr: new (...a: any[]) => Record ) => {
      if (!(ctr.prototype instanceof Record)) {
          throw new RecordMissingExtendsError(ctr);
      }

      return (class extends ctr {
          constructor(...args: any[]) {
              const [data] = args;
              if (data instanceof ctr) {
                  return data;
              }
              super(...args);
              this._completeInitialization(); // no assertion since constructor returns a record
          }
      });
  };
}

@Model()
class MyRecord extends Record { }

@Model()// compile time error, we don't extend Record
class MyRecord2  { }

Answer 3

Answer №2

Type Constraint

T must be a type that extends { new(...args: any[]): {} }

Here, the parameter T is restricted to only accept types that are extensions of { new(...args: any[]): {} }. To clarify the formatting, the type should look like this:

{
    new(...args: any[]): {}
}

This definition describes what's called a newable, which is essentially a function object that can only be invoked using the keyword new. For example:

let A: { new(): any; };
A(); // not allowed
new A(); // allowed

let B: { new(foo: string): any; };
B(); // not allowed
new B(); // not allowed, missing parameter
new B('bar'); // allowed

The notation ...args: any[] represents a rest parameter declaration, and the return type {} indicates that an object must be returned, which TypeScript assumes has no properties at all.

Anonymous Class in Return

Regarding the return type: As the Model decorator function is a class decorator, it can actually return a class itself. If such a class is returned, it will be used instead of the original decorated class.

If a class decorator returns a value, it will substitute the class declaration with the provided constructor function.

– from the TS handbook

For instance:

// `ctr` often stands for "constructor"
function Decorate(ctr: Function) {
    return class {
        constructor() {
            super();
            console.log('decorated');
        }
    };
}

@Decorate
class A {
    constructor() {
        console.log('A');
    }
}

new A(); // output will be: "A", then "decorated"

Answer 4

Type Constraint

T must be a type that extends { new(...args: any[]): {} }

Here, the parameter T is restricted to only accept types that are extensions of { new(...args: any[]): {} }. To clarify the formatting, the type should look like this:

{
    new(...args: any[]): {}
}

This definition describes what's called a newable, which is essentially a function object that can only be invoked using the keyword new. For example:

let A: { new(): any; };
A(); // not allowed
new A(); // allowed

let B: { new(foo: string): any; };
B(); // not allowed
new B(); // not allowed, missing parameter
new B('bar'); // allowed

The notation ...args: any[] represents a rest parameter declaration, and the return type {} indicates that an object must be returned, which TypeScript assumes has no properties at all.

Anonymous Class in Return

Regarding the return type: As the Model decorator function is a class decorator, it can actually return a class itself. If such a class is returned, it will be used instead of the original decorated class.

If a class decorator returns a value, it will substitute the class declaration with the provided constructor function.

– from the TS handbook

For instance:

// `ctr` often stands for "constructor"
function Decorate(ctr: Function) {
    return class {
        constructor() {
            super();
            console.log('decorated');
        }
    };
}

@Decorate
class A {
    constructor() {
        console.log('A');
    }
}

new A(); // output will be: "A", then "decorated"

Sneaky decorator design pattern

Answer №1

Answer №2

Type Constraint

Anonymous Class in Return

Similar questions

Discovering Type Definitions in Nuxt.js Project Without Manual Imports in VSCode: A Step-by-Step Guide

Transitioning from Angular's promises to Observables (RxJS) for making repetitive API calls to a single endpoint

PrismaClient is currently incompatible with this browser environment and has been optimized for use in an unknown browser when performing updates

Ways to ensure TypeScript shows an error when trying to access an array index

How can we incorporate methods using TypeScript?

React/Typescript: The object might be null

Tips on using Visual Studio Code to troubleshoot Angular 4 unit tests

Angular 5 Tutorial: Defining the "of" Method in HTTP Services

Angular 2: Transforming File into Byte Array

Ensuring that an object containing optional values meets the condition of having at least one property using Zod validation

What is the syntax for creating a link tag with interpolation in Angular 2 / Ionic 2?

What is the method for confirming whether an emit has been defined?

The database migration encounters an issue: The module 'typeorm' cannot be located

Help! I keep getting the NullInjectorError in the console saying there is no provider for Subscription. Why is this happening?

Arranging an array of arrays based on the mm/dd/yyyy date field

The type of props injected by WithStyles

Is it safe to use subjects in Angular like this, or are there potential security concerns?

Can TypeScript allow for type checking within type definitions?

Angular PrimeNG table does not successfully sort an array of class objects

WebStorm error: The type of argument 'this' cannot be assigned to the parameter type 'ObjectConstructor