빠른 팁 : TypeScript의 데코레이터-JS 튜토리얼-php.cn

빠른 팁 : TypeScript의 데코레이터

Lisa Kudrow

풀어 주다： 2025-02-08 10:11:15

원래의

408명이 탐색했습니다.

typescript 5.0의 데코레이터 : 클래스와 메소드를 우아하게 수정

이 기사는 "TypeScript의 힘을 발표"하여 발췌 한 것으로, 이는 TypeScript 5.0에서 Decorator의 새로운 기능을 사용하는 방법을 보여줍니다. Quick Tip: Decorators in TypeScript 데코레이터는 거의 항상 ECMAScript의 일부였습니다. 이 깔끔한 도구를 사용하면 재사용 가능한 방식으로 클래스와 멤버를 수정할 수 있습니다. 그것들은 실험 징후에 따라 한동안 TypeScript에있었습니다. 데코레이터의 2 단계 반복은 실험적이지만 Mobx, Angular, Nest 및 Typeorm과 같은 라이브러리에서 널리 사용되었습니다. TypeScript 5.0의 데코레이터는 ECMAScript 제안과 완전히 동기화되어 있으며 이미 매우 성숙하며 3 단계에 있습니다.

데코레이터를 사용하면 클래스의 동작과 그 방법을 조정하는 함수를 만들 수 있습니다. 메소드에 디버그 문장을 추가해야한다고 가정 해 봅시다. TypeScript 5.0 이전에는 각 방법에서 디버그 문을 수동으로 복사하여 붙여 넣을 수 있습니다. 데코레이터를 사용하면 한 번만 작동하면 작업자에 연결된 각 방법에 변경 사항이 적용됩니다.

더 이상 사용되지 않은 방법 중 하나를 기록하기위한 데코레이터를 만들어 봅시다.

card.getValue ()가 호출 될 때마다 경고 메시지가 콘솔에 로그인 될 것으로 예상됩니다. 위의 데코레이터를 다음과 같이 구현할 수 있습니다

이것은 언뜻보기에 약간 혼란 스러울 수 있지만 분해합시다.

우리의 데코레이터 함수는 두 가지 매개 변수의 대상과 컨텍스트를 취합니다.

대상은 우리가 자체적으로 장식하는 방법입니다.

컨텍스트는 메소드에 대한 메타 데이터입니다.

우리는 동일한 서명으로 함수를 반환합니다.

이 경우 Console.warn을 호출하여 더 이상 사용되지 않은 알림을 기록한 다음 메소드를 호출합니다.

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

로그인 후 복사

ClassMethodDecorator 유형에는 다음 속성이 있습니다

종류 : 장식 된 속성의 유형. 위의 예에서는 카드 인스턴스의 메소드를 장식하기 때문에 메소드가됩니다.

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

로그인 후 복사

이름 : 부동산의 이름. 위의 예에서 이것은 getValue입니다.

정적 : 클래스 요소가 정적인지 거짓인지를 나타내는 값.

private : 클래스 요소에 개인 이름이 있는지 여부를 나타내는 값.