Conseil rapide: décorateurs en dactylographie

décorateurs dans TypeScript 5.0: Modifiez élégamment les classes et méthodes

Cet article est extrait de "libérer la puissance de TypeScript", qui vous montrera comment utiliser la nouvelle fonctionnalité de Decorator dans TypeScript 5.0.

Les décorateurs ont presque toujours fait partie d'Ecmascript. Ces outils soignés nous permettent de modifier les cours et les membres de manière réutilisable. Ils sont en dactylographie depuis un certain temps, bien que sous des signes expérimentaux. Bien que les itérations de stade 2 des décorateurs aient été expérimentales, ils ont été largement utilisés dans des bibliothèques telles que MOBX, Angular, Nest et Typetrorm. Le décorateur de TypeScript 5.0 est entièrement synchronisé avec la proposition ECMAScript et est déjà très mature et est au stade 3.

Le décorateur nous permet de créer une fonction qui ajuste le comportement d'une classe et ses méthodes. Supposons que nous devons ajouter des instructions de débogage à la méthode. Avant TypeScript 5.0, nous n'avons pu copier et coller manuellement les instructions de débogage dans chaque méthode. Avec le décorateur, nous n'avons besoin de fonctionner qu'une seule fois et les modifications sont appliquées à chaque méthode attachée au décorateur.

Créons un décorateur pour enregistrer le déprécié l'une des méthodes données:

<code class="language-typescript">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 // ? 这是一个装饰器！
  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;
  }

  // 新的实现方式！
  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();</code>

Nous nous attendons à ce que chaque fois que card.getValue () soit appelé, un message d'avertissement sera enregistré à la console. Nous pouvons implémenter le décorateur ci-dessus comme suit:

<code class="language-typescript">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;
};</returnvalue></this></code>

Cela peut être un peu déroutant à première vue, mais décomposons-le:

• Notre fonction de décorateur prend deux paramètres: cible et contexte.
• La cible est la méthode que nous décorions elle-même.
• Le contexte est des métadonnées sur la méthode.
• Nous renvoyons une fonction avec la même signature.
• Dans ce cas, nous appelons Console.warn pour enregistrer la notification de dépréciation, puis appelons la méthode.

ClassMethodDecorator Type a les propriétés suivantes:

• KING: Le type de l'attribut décoré. Dans l'exemple ci-dessus, ce sera une méthode car nous décorions la méthode sur l'instance de la carte.
• Nom: le nom de la propriété. Dans l'exemple ci-dessus, c'est GetValue.
• statique: une valeur indiquant si un élément de classe est statique ou faux.
• Private: une valeur indiquant si l'élément de classe a un nom privé.
• Accès: un objet qui peut être utilisé pour accéder à la valeur actuelle d'un élément de classe à l'exécution.
• a: détermine si l'objet a le même attribut que l'élément décoré.
• Get: appelez le secteur sur l'objet fourni.

Vous pouvez tester l'exemple de code ci-dessus dans ce terrain de jeu.

Le décorateur

fournit un sucre syntaxique pratique pour ajouter des messages de journal (comme nous l'avons fait dans l'exemple ci-dessus) et de nombreux autres cas d'utilisation courants. Par exemple, nous pouvons créer un décorateur qui liera automatiquement la méthode à l'instance actuelle, ou modifier le descripteur de propriété de la méthode ou de la classe.

Cet article est extrait de "déverrouiller la puissance de TypeScript" et peut être acheté chez SitePoint Premium et les détaillants de livres électroniques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!