TypeScript 5.0 中的裝飾器：優(yōu)雅地修改類和方法

本文節(jié)選自《釋放TypeScript的威力》，將向您展示如何在TypeScript 5.0中使用裝飾器這一新特性。

裝飾器幾乎一直是ECMAScript的一部分。這些簡潔的工具允許我們以可重用的方式修改類和成員。它們在TypeScript中已經(jīng)存在一段時間了——儘管是在實驗性標(biāo)誌下。雖然裝飾器的Stage 2迭代一直是實驗性的，但它們已被廣泛應(yīng)用於MobX、Angular、Nest和TypeORM等庫中。 TypeScript 5.0的裝飾器與ECMAScript提案完全同步，已經(jīng)非常成熟，處於Stage 3階段。

裝飾器允許我們創(chuàng)建一個函數(shù)，該函數(shù)可以調(diào)整類及其方法的行為。假設(shè)我們需要在方法中添加一些調(diào)試語句。在TypeScript 5.0之前，我們只能手動在每個方法中復(fù)制粘貼調(diào)試語句。使用裝飾器，我們只需操作一次，更改就會應(yīng)用於裝飾器附加的每個方法。

讓我們創(chuàng)建一個用於記錄給定方法已棄用的裝飾器：

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

  // 新的實現(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();

我們希望每當(dāng)調(diào)用card.getValue()時，都會向控制臺記錄一條警告消息。我們可以如下實現(xiàn)上述裝飾器：

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

乍一看這可能有點令人困惑，但讓我們分解一下：

• 我們的裝飾器函數(shù)接受兩個參數(shù)：target和context。
• target是我們正在裝飾的方法本身。
• context是關(guān)於該方法的元數(shù)據(jù)。
• 我們返回一個具有相同簽名的函數(shù)。
• 在這種情況下，我們調(diào)用console.warn來記錄棄用通知，然後調(diào)用該方法。

ClassMethodDecorator類型具有以下屬性：

• kind：被裝飾屬性的類型。在上面的示例中，這將是method，因為我們正在裝飾Card實例上的方法。
• name：屬性的名稱。在上面的示例中，這是getValue。
• static：一個值，指示類元素是靜態(tài)（true）還是實例（false）元素。
• private：一個值，指示類元素是否具有私有名稱。
• access：一個對象，可以在運行時用於訪問類元素的當(dāng)前值。
• has：確定對像是否具有與被裝飾元素同名的屬性。
• get：在提供的對像上調(diào)用setter。

您可以在此playground中測試上面的代碼示例。

裝飾器為添加日誌消息（如我們在上面的示例中所做的那樣）以及許多其他常見用例提供了方便的語法糖。例如，我們可以創(chuàng)建一個裝飾器，該裝飾器會自動將方法綁定到當(dāng)前實例，或者修改方法或類的屬性描述符。

本文節(jié)選自《釋放TypeScript的威力》，可在SitePoint Premium和電子書零售商處購買。

以上是快速提示：打字稿中的裝飾器的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！