빠른 팁 : TypeScript의 데코레이터

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

이 기사는 "TypeScript의 힘을 발표"하여 발췌 한 것으로, 이는 TypeScript 5.0에서 Decorator의 새로운 기능을 사용하는 방법을 보여줍니다. 데코레이터는 거의 항상 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 : 클래스 요소에 개인 이름이 있는지 여부를 나타내는 값.

액세스 : 런타임에서 클래스 요소의 현재 값에 액세스하는 데 사용할 수있는 객체.
• 는 : 객체가 장식중인 요소와 동일한 속성을 가지고 있는지 여부를 결정합니다.
get : 제공된 객체에서 세트를 호출하십시오.
이 놀이터에서 위의 코드 예제를 테스트 할 수 있습니다.
데코레이터는 로그 메시지를 추가하기 위해 편리한 구문 설탕 (위의 예에서와 같이)과 다른 많은 일반적인 사용 사례를 제공합니다. 예를 들어, 메소드를 현재 인스턴스에 자동으로 바인딩하거나 메소드 또는 클래스의 속성 설명자를 수정하는 데코레이터를 만들 수 있습니다.
• 이 기사는 "TypeScript의 전력 잠금 해제"에서 발췌하며 SitePoint Premium 및 E-Book 소매 업체에서 구입할 수 있습니다.

위 내용은 빠른 팁 : TypeScript의 데코레이터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!