Decorators in TypeScript 5.0: Elegantly modify classes and methods

This article is excerpted from "Releasing the Power of TypeScript", which will show you how to use the new feature of decorator in TypeScript 5.0.

Decorators have almost always been part of ECMAScript. These neat tools allow us to modify classes and members in a reusable way. They have been in TypeScript for some time—although under experimental signs. Although the Stage 2 iterations of decorators have been experimental, they have been widely used in libraries such as MobX, Angular, Nest, and TypeORM. TypeScript 5.0's decorator is fully synchronized with the ECMAScript proposal and is already very mature and is in Stage 3.

The decorator allows us to create a function that adjusts the behavior of a class and its methods. Suppose we need to add some debug statements to the method. Prior to TypeScript 5.0, we could only copy and paste debug statements manually in each method. With the decorator, we only need to operate once and the changes are applied to each method attached to the decorator.

Let's create a decorator for logging the deprecated one of the given methods:

class Card {
  constructor(public suit: Suit, public rank: Rank) {
    this.suit = suit;
    this.rank = rank;
  }

  get name(): CardName {
    return `${this.rank} of ${this.suit}`;
  }

  @deprecated // ? 這是一個(gè)裝飾器！
  getValue(): number {
    if (this.rank === 'Ace') return 14;
    if (this.rank === 'King') return 13;
    if (this.rank === 'Queen') return 12;
    if (this.rank === 'Jack') return 11;
    return this.rank;
  }

  // 新的實(shí)現(xiàn)方式！
  get value(): number {
    if (this.rank === 'Ace') return 14;
    if (this.rank === 'King') return 13;
    if (this.rank === 'Queen') return 12;
    if (this.rank === 'Jack') return 11;
    return this.rank;
  }
}

const card = new Card('Spades', 'Queen');
card.getValue();

We expect that whenever card.getValue() is called, a warning message will be logged to the console. We can implement the above decorator as follows:

const deprecated = <This, Arguments extends any[], ReturnValue>(
  target: (this: This, ...args: Arguments) => ReturnValue,
  context: ClassMethodDecoratorContext<ReturnValue>
) => {
  const methodName = String(context.name);

  function replacementMethod(this: This, ...args: Arguments): ReturnValue {
    console.warn(`Warning: '${methodName}' is deprecated.`);
    return target.call(this, ...args);
  }

  return replacementMethod;
};

This may be a bit confusing at first glance, but let's break it down:

• Our decorator function takes two parameters: target and context.
• target is the method we are decorating itself.
• context is metadata about the method.
• We return a function with the same signature.
• In this case, we call console.warn to record the deprecation notification and then call the method.

ClassMethodDecorator type has the following properties:

• kind: The type of the decorated attribute. In the example above, this will be a method because we are decorating the method on the Card instance.
• name: The name of the property. In the example above, this is getValue.
• static: A value indicating whether a class element is static or false.
• private: A value indicating whether the class element has a private name.
• access: An object that can be used to access the current value of a class element at runtime.
• has: Determines whether the object has the same attribute as the element being decorated.
• get: Call setter on the provided object.

You can test the above code example in this playground.

Decorator provides convenient syntactic sugar for adding log messages (as we did in the example above) and many other common use cases. For example, we can create a decorator that will automatically bind the method to the current instance, or modify the property descriptor of the method or class.

This article is excerpted from "Unlocking the Power of TypeScript" and can be purchased at SitePoint Premium and e-book retailers.

The above is the detailed content of Quick Tip: Decorators in TypeScript. For more information, please follow other related articles on the PHP Chinese website!