매개변수 데코레이터

매개변수 데코레이터

매개변수 데코레이터는 메서드 선언 앞에 사용됩니다. 매개변수 데코레이터는 클래스 생성자 함수 또는 메서드의 매개변수 에 사용될 수 있습니다. 매개변수 데코레이터 함수는 전달 받는 인자가 총 3가지 입니다.

1. target: any

2. prop: string

3. parameter_index: number

매개변수 데코레이터는 예시를 살펴보겠습니다. 전달 받은 인자 중 마지막 매개변수 인덱스는 클래스 생성자 또는 메서드 매개변수 내 데코레이터를 사용한 순서입니다. 이름이 없는 생성자 함수의 경우는 undefined가 출력됩니다.

// Log 매개변수 데코레이터
function Log(t:any, p:string, i:number) {
  console.log(t.name);
  console.log(`
    매개변수 순서: ${i}, 
    멤버 이름: ${p === undefined ? 'constructor' : p}
  `);
}
​
// Button 클래스
class Button {

  el:HTMLButtonElement;
  color:string;

  // 생성자 함수 내에 Log 데코레이터 사용
  constructor(
    @Log el:HTMLButtonElement, 
    @Log color:string = 'transparent'
  ) {
    this.el = el;
    this.color = color;
  }

  // 스태틱 메서드 내에 Log 데코레이터 사용
  static initialize(
    @Log els:NodeList, 
    @Log color:string = 'transparent'
  ){
    return [].slice.call(els).map(el => new Button(el, color));
  }

}

// Button.initialize() 스태틱 메서드 사용
const btns = Button.initialize( document.querySelectorAll('.button'), '#900' );

Console에 출력된 결과는 다음과 같습니다. 매개변수의 순서가 역순인 것이 눈에 띕니다. 버튼 객체 인스턴스들을 순환 생성 처리하는 initialize 스태틱 메서드 다음에 constructor 생성자 함수가 출력됩니다.

Console

Button
매개변수 순서: 1, 멤버 이름: initialize

Button
매개변수 순서: 0, 멤버 이름: initialize

Button
매개변수 순서: 1, 멤버 이름: constructor

Button
매개변수 순서: 0, 멤버 이름: constructor

참고

Documentation - Decoratorstypescriptlang

TypeScript - 데코레이터