클래스 선언과 맴버에 대한 주석(annotations)과 메타 프로그래밍 구문을 모두 추가 할 수 있는 방법을 제공한다.

데코레이터를 사용하려면 tsconfig.json 설정을 변경해줘야 한다.

{
  "compilerOptions": {
  ...  
  "experimentalDecorators": true,
  ...
  }
}

Decorator 정의

클래스, 속성, 메서드, 접근 제어자, 매개변수 등에 사용할 수 있는 특별한 함수이다. 선언된 데코레이터 함수를 사용할 때는 데코레이터 이름 앞에 @를 붙입니다.

import "./style.css";

///////////////////////////////////////
// TypeScript 데코레이터
///////////////////////////////////////

function Component (target: Function) {
  console.log(target);
  console.log(target.prototype);
}
// 컴포넌트 데코레이터 사용
@Component
class ButtonComponent {
  
  static version:string = '0.0.1';

  constructor( public type:string ) {}

  static create(){}

  public toggle(){}
  public deactive(){}
  public destroy(){}

}

데코레이터 팩토리

함수 사용 시, 사용자가 인자를 전달할 수 있는 것과 유사하게, 데코레이터 함수 또한 팩토리를 사용해 사용자로부터 인자를 전달 받도록 설정할 수 있다. 데코레이터 팩토리 함수는 데코레이터 함수를 감싸는 래퍼 함수입니다.

팩토리는 사용자로부터 전달 받은 인자를, 내부에서 반환되는 데코레이터 함수는 데코레이터로 사용됩니다.