Typescript에서 Decorators 사용하기

타입스크립트는 데코레이터 문법을 지원한다.

다만, 현재 (v5.0.4) 버전에서는 실험적인 문법으로 이를 지원하기에 추후 변경될 가능성이 있다.

👍 타입스크립트에서는 데코레이터를 사용하여 메타데이터를 부여할 수 있다. (추가적인 설정이나 정보를 첨부한다)

 

🍉 실험적인 기능이기에 데코레이터 문법을 사용하기 위해서는 tsconfig.json 설정이 필요하다.

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}

target이 ES5 이하 버전이 되면, 일부 문법이 제대로 작동하지 않을 수도 있다.

 

데코레이터의 종류로는 클래스 데코레이터 (Class Decorator), 메서드 데코레이터 (Method Decorator), 프로퍼티 데코레이터 (Property Decorator), 매개변수 데코레이터 (Parameter Decorator)가 있다.

 

 

데코레이터의 구조

데코레이터는 일단 함수로 선언된다.

선언된 데코레이더를 사용할 땐, @함수_이름 으로 적용될 대상 위에 사용될 수 있다.

 

데코레이터 함수의 첫 번째 인자는 target으로, 이는 데코레이터 함수가 적용될 요소(클래스, 메서드, 프로퍼티, 매개변수)를 의미한다.

따라서, target의 타입과 일치하는 곳에서만 이 데코레이터는 유효하다.

 

두 번째 인자, key는 프로퍼티 데코레이터와 메서드 데코레이터에서 해당 프로퍼티 또는 메서드의 이름을 나타내는 문자열이다.

따라서, 클래스나 매개변수 데코레이터에서는 존재하지 않는다.

 

마지막 세 번째 인자는 descriptor로, 프로퍼티 데코레이터와 메서드 데코레이터에서 해당 프로퍼티 또는 메서드의 속성 설명자(Property Descriptor)를 나타내는 객체이다.

따라서, 프로퍼티나 메서드 데코레이터에서 사용 가능한 인자이다.

 

Property Descriptor의 예제로 다음과 같은 객체가 있을 수 있다. (value는 해당 프로퍼티나 메서드의 값을 나타낸다)

{
  "value": () => {
    console.log("original method or property");
  },
  "writable": true,
  "enumerable": false,
  "configurable": true,
  ...
}

 

🍊 데코레이터는 여러 개가 동시에 적용될 수 있으며 위에서 아래로 순서대로 적용된다.

 

데코레이터를 이용해서 로그를 남기는 코드를 예시로 남긴다. (👉 메서드 데코레이더) 

🤭 feat. chatGPT

function timingLogger(target: any, propertyKey: string, descriptor: PropertyDescriptor): PropertyDescriptor {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    const startTime = Date.now();
    const result = originalMethod.apply(this, args);
    const endTime = Date.now();
    const executionTime = endTime - startTime;
    console.log(`메서드 '${String(propertyKey)}'의 실행 시간: ${executionTime}ms`);
    return result;
  };

  return descriptor;
}

class Calculator {
  @timingLogger
  add(a: number, b: number): number {
    return a + b;
  }
  @timingLogger
  longFor() {
    for(let i = 0; i < 10000; i++) {
      for(let j = 0; j < 10000; j++) {
        
      }
    }
    return "end";
  }
}

const calculator = new Calculator();
console.log(calculator.add(3, 4));
console.log(calculator.longFor());

 

데코레이터를 사용하면, 다음과 같은 장점이 있다.  🎉

1. 관심사 분리 및 코드 재사용성 👍
2. 런타임에서 동적으로 메타데이터를 부여하고 동적으로 추가 동작을 설계할 수 있다.
3. 의존성 주입(DI), 라우팅, DB 연결 등 추가적인 기능들이 프레임워크, 라이브러리를 통해서 제공될 수 있다.
4. 가독성이 좋고 유지보수하기 좋은 코드를 작성할 수 있다.

무엇보다도(개인적으로) 코드가 깔끔해지는 장점이 있는 것 같다.

 

 

💨 타입스크립트 핸드북에서 데코레이터 찾아보기

https://www.typescriptlang.org/ko/docs/handbook/decorators.html

Documentation - Decorators