사용자 정의 TypeScript 데코레이터를 만드는 방법

데코레이터는 런타임에 클래스, 메서드, 속성 또는 매개변수를 수정할 수 있는 TypeScript의 기능입니다. 이들은 메타 프로그래밍 기능을 제공하는 특수 함수입니다. TypeScript에서 데코레이터는 종종 Angular와 같은 프레임워크에서 기능을 향상시키는 데 사용됩니다. 이 문서에서는 사용자 지정 데코레이터를 단계별로 만드는 방법을 설명합니다.

TypeScript의 데코레이터 유형

TypeScript에는 네 가지 주요 데코레이터 유형이 있습니다.

• 클래스 데코레이터
• 메서드 데코레이터
• 액세서 데코레이터
• 부동산 장식업체

TypeScript에서 데코레이터 활성화

TypeScript 프로젝트에서 데코레이터를 사용하려면 tsconfig.json 파일에서 experimentalDecorators 옵션을 활성화해야 합니다.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

클래스 데코레이터 만들기

클래스 데코레이터는 클래스 생성자에 적용됩니다. 클래스에 메타데이터나 기능을 추가하는 데 유용합니다. 간단한 클래스 데코레이터를 만드는 방법의 예는 다음과 같습니다.

function logClass(constructor: Function) {
  console.log(`Class ${constructor.name} is created`);
}

@logClass
class Person {
  constructor(public name: string) {}
}

const person = new Person("John");
// Output: Class Person is created

메서드 데코레이터 생성

메서드 데코레이터는 클래스 메서드에 적용됩니다. 메서드의 동작을 수정하거나 관찰하는 데 사용할 수 있습니다. 아래는 메서드 실행을 기록하는 메서드 데코레이터의 예입니다.

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments:`, args);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Calculator {
  @logMethod
  add(a: number, b: number) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3); 
// Output: Method add is called with arguments: [2, 3]

부동산 장식자 만들기

속성 데코레이터는 속성을 관찰하거나 수정하는 데 사용할 수 있습니다. 다음은 속성 데코레이터가 속성에 기본값이 있는지 확인하는 예입니다.

function defaultValue(value: any) {
  return function (target: any, propertyKey: string) {
    let propertyValue = value;

    const getter = function () {
      return propertyValue;
    };

    const setter = function (newValue: any) {
      propertyValue = newValue || value;
    };

    Object.defineProperty(target, propertyKey, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true,
    });
  };
}

class User {
  @defaultValue('Anonymous')
  name!: string;
}

const user = new User();
console.log(user.name); // Output: Anonymous
user.name = 'Alice';
console.log(user.name); // Output: Alice

매개변수 데코레이터 생성

매개변수 데코레이터는 메서드의 매개변수에 적용됩니다. 유효성 검사나 인수 로깅과 같은 작업에 유용할 수 있습니다. 매개변수 데코레이터의 예는 다음과 같습니다.

function logParameter(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} is being decorated`);
}

class Vehicle {
  drive(@logParameter speed: number) {
    console.log(`Driving at speed ${speed}`);
  }
}

const vehicle = new Vehicle();
vehicle.drive(50);
// Output: Parameter at index 0 in method drive is being decorated

결론

TypeScript의 데코레이터는 클래스, 메서드 및 속성의 기능을 향상시키고 확장할 수 있는 강력한 메타 프로그래밍 기능을 제공합니다. 사용자 지정 데코레이터를 사용하면 재사용 가능하고 효율적이며 체계적인 코드 구조를 만들 수 있습니다. 이 가이드에서는 클래스, 메서드, 속성 및 매개변수와 같은 다양한 유형의 데코레이터를 만드는 방법을 보여주었습니다.