Schneller Tipp: Dekorateure in Typenkript

Dekorateure in TypeScript 5.0: elegant modifizieren Sie Klassen und Methoden

Dieser Artikel wird aus "Freisetzung der Kraft von Typscript" entzieht, die Ihnen zeigt, wie Sie die neue Funktion des Dekors in TypeScript 5.0 verwenden.

Dekoratoren waren fast immer Teil des ECMascript. Mit diesen ordentlichen Tools können wir Klassen und Mitglieder wiederverwendbar ändern. Sie sind seit einiger Zeit in Typenkript - obwohl sie unter experimentellen Anzeichen. Obwohl die Iterationen von Dekoratoren der Stufe 2 experimentell waren, wurden sie in Bibliotheken wie MOBX, Winkel, Nest und Typorm weit verbreitet. Der Dekorateur von Typecript 5.0 wird vollständig mit dem ECMascript -Vorschlag synchronisiert und ist bereits sehr ausgereift und befindet sich in Stufe 3.

Mit dem Dekorateur können wir eine Funktion erstellen, die das Verhalten einer Klasse und ihrer Methoden anpasst. Angenommen, wir müssen der Methode einige Debug -Aussagen hinzufügen. Vor dem TypeScript 5.0 konnten wir in jeder Methode nur manuelle Debug -Anweisungen kopieren und einfügen. Mit dem Dekorateur müssen wir nur einmal arbeiten und die Änderungen werden auf jede an den Dekorateur verbundene Methode angewendet.

Erstellen wir einen Dekorateur für die Protokollierung der veralteten Methoden:

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

Wir erwarten, dass eine Warnmeldung, wenn Card.getValue () aufgerufen wird, an der Konsole angemeldet wird. Wir können den obigen Dekorator wie folgt implementieren:

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

Das mag auf den ersten Blick ein bisschen verwirrend sein, aber lasst es uns aufschlüsseln:

• Unsere Dekoratorfunktion nimmt zwei Parameter ein: Ziel und Kontext.
• Ziel ist die Methode, die wir selbst dekorieren.
• Kontext ist Metadaten über die Methode.
• Wir geben eine Funktion mit derselben Signatur zurück.
• In diesem Fall rufen wir Console.warn auf, um die Abschreibungsbenachrichtigung aufzuzeichnen und dann die Methode aufzurufen.

classMethodDecorator -Typ hat die folgenden Eigenschaften:

• Art: Der Typ des dekorierten Attributs. Im obigen Beispiel ist dies eine Methode, da wir die Methode auf der Karteninstanz dekorieren.
• Name: Der Name der Eigenschaft. Im obigen Beispiel ist dies GetValue.
• statisch: Ein Wert, der angibt, ob ein Klassenelement statisch oder falsch ist.
• privat: Ein Wert, der angibt, ob das Klassenelement einen privaten Namen hat.
• Zugriff: Ein Objekt, mit dem zur Laufzeit auf den aktuellen Wert eines Klassenelements zugreifen kann.
• hat: Bestimmt, ob das Objekt das gleiche Attribut wie das dekorierte Element hat.
• GET: Rufen Sie Setter auf das bereitgestellte Objekt an.

Sie können das obige Codebeispiel auf diesem Spielplatz testen.

Der

Dekorateur bietet bequemen syntaktischen Zucker für das Hinzufügen von Protokollnachrichten (wie im obigen Beispiel) und viele andere häufige Anwendungsfälle. Zum Beispiel können wir einen Dekorateur erstellen, der die Methode automatisch an die aktuelle Instanz binden oder den Eigenschaftsdeskriptor der Methode oder Klasse ändern.

Dieser Artikel wird aus "Entsperren der Kraft von Typscript" ausgewählt und kann bei SitePoint Premium- und E-Book-Einzelhändlern gekauft werden.

Das obige ist der detaillierte Inhalt vonSchneller Tipp: Dekorateure in Typenkript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!