クイックヒント：タイプスクリプトのデコレーター-jsチュートリアル-php.cn

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

Lisa Kudrow

リリース： 2025-02-08 10:11:15

オリジナル

405 人が閲覧しました

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

Quick Tip: Decorators in TypeScript この記事は、「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つのパラメーターを採用しています。