クイックヒント：タイプスクリプトのデコレーター

タイプスクリプト5.0のデコレーター：クラスとメソッドをエレガントに変更する

この記事は、「TypeScriptのパワーのリリース」から抜粋されています。これにより、TypeScript 5.0のデコレーターの新機能を使用する方法が示されます。

デコレーターは、ほとんど常にECMAScriptの一部でした。これらのきちんとしたツールを使用すると、クラスとメンバーを再利用可能な方法で変更できます。それらはしばらくの間タイプスクリプトにいましたが、実験的な兆候の下で。デコレーターのステージ2の反復は実験的でしたが、それらはMobx、Angular、Nest、Typeormなどのライブラリで広く使用されています。 TypeScript 5.0のデコレーターは、ECMAScriptの提案と完全に同期されており、すでに非常に成熟しており、ステージ3にあります。

デコレーターを使用すると、クラスの動作とその方法を調整する関数を作成できます。メソッドにいくつかのデバッグステートメントを追加する必要があるとします。 TypeScript 5.0の前に、各方法でデバッグステートメントを手動でコピーして貼り付けることができました。デコレーターを使用すると、1回操作する必要があり、変更はデコレータに接続された各メソッドに適用されます。

与えられた方法の1つを廃止するためのデコレーターを作成しましょう。

card.getValue（）が呼び出されると、警告メッセージがコンソールにログに記録されると予想されます。上記のデコレーターを次のように実装できます：

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();

これは一見して少し混乱するかもしれませんが、それを分解しましょう：

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;
};

デコレーター関数は、ターゲットとコンテキストの2つのパラメーターを採用しています。

ターゲットは、私たちがそれ自体を飾っている方法です。
コンテキストは、メソッドに関するメタデータです。
同じ署名で関数を返します。
この場合、console.warnに電話して非推奨通知を記録し、メソッドを呼び出します。
• ClassMethodDecoratorタイプには、次の特性があります

種類：装飾された属性のタイプ。上記の例では、これはカードインスタンスでメソッドを飾っているため、方法になります。

名前：プロパティの名前。上記の例では、これはGetValueです。

• 静的：クラス要素が静的か偽かを示す値。
• プライベート：クラス要素に賛成名があるかどうかを示す値。
• アクセス：実行時にクラス要素の現在の値にアクセスするために使用できるオブジェクト。
• has：オブジェクトが装飾されている要素と同じ属性を持っているかどうかを決定します。
• 取得：提供されたオブジェクトのセッターを呼び出します。
この遊び場で上記のコード例をテストできます。
デコレーターは、ログメッセージ（上記の例で行ったように）および他の多くの一般的なユースケースを追加するための便利な構文糖を提供します。たとえば、メソッドを自動的に現在のインスタンスにバインドするデコレーターを作成したり、メソッドまたはクラスのプロパティ記述子を変更したりできます。

この記事は、「TypeScriptのパワーのロック解除」から抜粋されており、SitePoint Premiumおよび電子書籍の小売業者で購入できます。

以上がクイックヒント：タイプスクリプトのデコレーターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。