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

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

裝飾器幾乎一直是ECMAScript的一部分。這些簡潔的工具允許我們以可重用的方式修改類和成員。它們在TypeScript中已經(jīng)存在一段時間了——盡管是在實(shí)驗(yàn)性標(biāo)志下。雖然裝飾器的Stage 2迭代一直是實(shí)驗(yàn)性的，但它們已被廣泛應(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;
  }

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

我們希望每當(dāng)調(diào)用card.getValue()時，都會向控制臺記錄一條警告消息。我們可以如下實(shí)現(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;
};

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

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

ClassMethodDecorator類型具有以下屬性：

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

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

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

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

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