[Typescript] 데코레이터의 기본구조

References

https://m.blog.naver.com/pjt3591oo/222120496022

https://lts0606.tistory.com/505

 

데코레이터(Decorator)란?

골뱅이 기호(@)를 사용하여, 해당 키워드가 붙은 클래스나 메소드 및 변수 등 사전에 정의된 기능이 동작하게끔 하는 기능이다.

 

클래스(class)

function classDecorator() {
  return function <T extends {new(...args:any[]):{}}> (constructor:T) {
    return class extends constructor {
      newProperty = "new property";
      hello = "override";
    }
  }
}

@classDecorator()
class Test {
  property = "property";
  hello: string;

  constructor(m: string) {
      this.hello = m;
  }
}

let t = new Test("world")
console.log(t)
Test {
  property: 'property',
  hello: 'override',
  newProperty: 'new property'
}

 

메소드(method)

function methodDecorator() {
  return function (target: any, property: any, descriptor: any) {
    console.log('before')
    descriptor.value()
    console.log('after')
  }
}

@classDecorator("param1", "param2")
class Test {
  property = "property";
  hello: string;

  constructor(m: string) {
    this.hello = m;
  }

  @methodDecorator()
  test() {
    console.log("test")
  }
}

 

프로퍼티(property)

function propertyDecorator(writable:boolean=true) {
  return function (target, decoratedPropertyName):any {
    return {
      value: 10,
      writable
    }
  }
}

class Test {
  property = "property";
  
  @propertyDecorator(false)
  hello;
}

 

파라미터(parameter)

function parameterDecorator() {
  return function (target: any, methodName: string, paramIdx: number) {
    console.log(target, methodName, paramIdx)
  }
}

class Test {
  property = "property";

  test(
    @parameterDecorator() param1: string,
    @parameterDecorator() param2: string
  ) {
  }
}

let t = new Test()
Test {} test 1
Test {} test 0