[TypeScript] 타입스크립트 데코레이터

1. 데코레이터 (Decorator)

데코레이터는 클래스나 클래스 맴버(속성, 메서드 등)에 메타프로그래밍 기능을 추가하고 싶을 때 사용합니다.

 

데코레이터는 @데코레이터명 을 붙이면 사용할 수 있습니다.

 

 

데코레이터	시그니처
클래스	(constructor: { new (...args: any[] ) => {} })
메서드	(target: any, propertyKey: string, propertyDescriptor: PropertyDescriptor)
속성	(target: any, propertyKey: string)
매개변수	(target: object, propertyKey: string, parameterIndex: number)
접근자	(target: any, propertyKey: string, descriptor: PropertyDescriptor)

 

1-1. 클래스

간단한 데코레이터 예시입니다.

실행하면 클래스 생성 전인데 "init" 이 출력됩니다.

function InitDecorator(constructor: Function) {
  console.log("init");
}

@InitDecorator
class Test {
  constructor() {
    console.log("test");
  }
}

 

1-2. 메서드

다음은 로그를 출력하는 데코레이터 예시입니다.

결과값(3)이 나오기 전에 "Called doSomething with [ 1, 2 ] " 가 출력됩니다.

function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Called ${propertyKey} with`, args);
    return originalMethod.apply(this, args);
  };
}

class MyClass {
  @Log
  doSomething(a: number, b: number) {
    return a + b;
  }
}

const my = new MyClass();
const res = my.doSomething(1, 2);
console.log("res", res);

// Called doSomething with [ 1, 2 ]
// res 3

 

1-3. 속성

function PropertyLogger(target: any, propertyKey: string) {
  console.log(`Property decorator called for: ${propertyKey}`);
}

class Person {
  @PropertyLogger
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}
// Property decorator called for: name

 

PropertyLogger는 단순히 데코레이터가 호출되는 시점에 로그만 찍습니다.

실제로 값을 바꾸거나 검증하려면 getter/setter 또는 proxy를 함께 사용해야 합니다.

 

1-4. 매개변수

function ParamLogger(target: any, methodName: string, parameterIndex: number) {
  console.log(
    `Parameter decorator on ${methodName}, parameter #${parameterIndex}`
  );
}

class Car {
  start(@ParamLogger speed: number) {
    console.log(`Starting at speed ${speed}`);
  }
}
const c = new Car();
c.start(100);
// Parameter decorator on start, parameter #0
// Starting at speed 100

 

매개변수 데코레이터는 주로 메타데이터를 수집하거나 유효성 검사 라이브러리에서 사용됩니다.

 

1-5. 접근자

function AccessorLogger(
  target: any,
  propertyKey: string,
  descriptor: PropertyDescriptor
) {
  console.log(`Accessor decorator on: ${propertyKey}`);
}

class Account {
  private _balance: number = 0;

  @AccessorLogger
  get balance() {
    return this._balance;
  }

  set balance(amount: number) {
    this._balance = amount;
  }
}

const acc = new Account();
acc.balance = 500;
console.log(acc.balance);
// Accessor decorator on: balance
// 500

 

접근자 데코레이터는 get 또는 set 에만 사용할 수 있으며, 속성과는 다르게

PropertyDescriptor를 수정할 수 있습니다.