[타입스크립트] 타입스크립트 데코레이터(Decorator)

타입스크립트에서 데코레이터는 클래스, 메소드, 액세서, 프로퍼티 또는 파라미터에 적용할 수 있는 특수한 종류의 선언적 함수입니다. 자바스크립트의 실험적 기능이지만 타입스크립트는 이를 언어 수준에서 지원합니다. 데코레이터는 코드에 메타-프로그래밍 패턴을 추가할 수 있게 해줍니다. 이는 클래스의 선언, 메소드, 프로퍼티의 동작을 수정하거나 확장하는 강력한 방법을 제공합니다.

데코레이터 사용을 위한 설정

타입스크립트에서 데코레이터를 사용하기 위해서는 tsconfig.json 파일에서 experimentalDecorators 옵션을 true로 설정해야 합니다:

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}Code language: JSON / JSON with Comments (json)

데코레이터의 종류

타입스크립트에서 다음과 같은 네 가지 유형의 데코레이터를 사용할 수 있습니다:

1. 클래스 데코레이터: 클래스 선언에 적용되며, 클래스 정의를 관찰, 수정 또는 대체할 수 있습니다.
2. 메소드 데코레이터: 클래스의 메소드에 적용되며, 메소드의 정의를 관찰, 수정 또는 대체할 수 있습니다.
3. 액세서 데코레이터: 클래스의 접근자(getter/setter)에 적용되어 접근자의 정의를 관찰, 수정 또는 대체할 수 있습니다.
4. 프로퍼티 데코레이터: 클래스의 프로퍼티에 적용되어 프로퍼티의 정의를 수정할 수 있습니다.
5. 파라미터 데코레이터: 메소드의 파라미터에 적용되어 파라미터에 대한 메타데이터를 수집하는데 사용됩니다.

데코레이터 작성 예제

클래스 데코레이터 예제

클래스 데코레이터는 클래스 생성자를 함수 인자로 받을 수 있으며, 새 클래스를 반환할 수도 있습니다:

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}Code language: JavaScript (javascript)

메소드 데코레이터 예제

메소드 데코레이터는 메소드의 프로퍼티 디스크립터를 인자로 받습니다:

function enumerable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.enumerable = value;
  };
}

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }

  @enumerable(false)
  greet() {
    return "Hello, " + this.greeting;
  }
}Code language: JavaScript (javascript)

데코레이터는 기능을 확장하고 코드를 재사용하기에 매우 유용한 도구입니다. 다만, 데코레이터의 사용은 코드 복잡성을 증가시킬 수 있으므로 필요한 경우에만 사용하는 것이 좋습니다.