TIL ( 데코레이터 - ts )

💡 데코레이터 ( feat. 타입스크립트 )

 

- 데코레이터는 클래스의 기능을 증강하는 함수로 여러 함수에서 공통으로 수행되는 부분을 데코레이터로 만들어 사용한다.

- 추가적인 기능을 주입하거나, 기존 기능을 수정하거나, 메타데이터를 추가하는 데 사용되며, 데코레이터는 주로 코드의 가독성을 높이고, 반복적인 작업을 줄여주며, 코드의 유지보수성을 향상시키는 데 유용하다

 

1. 데코레이터 기본 구조

function 데코레이터명(target: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor) { }

 - target 은 데코레이터가 적용된 요소를 나타낸다. ex) 클래스, 메서드, 프로퍼티 등

- propertyKey는 데코레티어가 적용된 프로퍼티나 메서드의 이름을 뜻한다.

- descriptor는 메서드나 getter나 setter의 프로퍼티 디스크립터를 나타낸다.

 

2. 데코레이터 유형

 

1) 클래스 데코레이터 (Class Decorator)

 - 클래스 데코레이터는 클래스 전체에 적용되며, 클래스가 생성될 때 특정 작업을 수행하고 싶은 경우 사용한다.

function logClass(constructor: Function) {
  console.log(`클래스가 생성되었습니다: ${constructor.name}`);
}
@logClass
class Person {
  constructor(public name: string) {}
}

- 로그 클래스 데코레이터가 사람 person 클래스에  적용되어 person  클래스가 생성 될때마다 콘솔에 로그를 출력시킨다.

 

2) 메서드 데코레이터 (Method Decorator)

- 메서드 데코레이터는 클래스의 특정 메서드에 적용되며, 메서드가 호출될 때 특정 작업을 수행하고 싶은 경우에 사용한다.

function 시간측정(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const 원본메서드 = descriptor.value;
  descriptor.value = function(...args: any[]) {
    const 시작시간 = Date.now();
    const 결과 = 원본메서드.apply(this, args);
    const 종료시간 = Date.now();
    console.log(`${propertyKey} 메서드 실행 시간: ${종료시간 - 시작시간}ms`);
    return 결과;
  };
  return descriptor;
}
class 계산기 {
  @시간측정
  더하다(a: number, b: number) {
    return a + b;
  }
}
const 내계산기 = new 계산기();
내계산기.더하다(5, 3);
// => 더하다 메서드 실행 시간: Xms

- 메서드가 호출될 때마다 데코레이터가 시간을 측정한다.

 

3) 접근자 데코레이터 (Accessor Decorator)

- 접근자 데코레이터는 클래스의 특정 접근자(ex. getter/setter )에 적용된다.  접근자가 호출될 때 특정 작업을 수행하고 싶은 경우에 사용한다.

function 로그접근자(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const 원본Getter = descriptor.get;

  descriptor.get = function() {
    console.log(`접근자가 호출되었습니다: ${propertyKey}`);
    return 원본Getter?.apply(this);
  };
  return descriptor;
}
class person {
  private _age: number;
  constructor(age: number) {
    this._age = age;
  }
  @로그접근자
  get age() {
    return this._age;
  }
}
const john = new person(30);
console.log(john.age);

 

4) 프로퍼티 데코레이터 (Property Decorator)

- 프로퍼티 데코레이터는 클래스의 특정 프로퍼티에 적용되며, 프로퍼티가 선언될 때 특정 작업을 수행하고 싶은 경우에 사용한다.

function logProperty(target: any, propertyKey: string) {
  console.log(`프로퍼티가 선언되었습니다: ${propertyKey}`);
}
class Book {
  @logProperty
  title: string;
  constructor(title: string) {
    this.title = title;
  }
}
const myBook = new Book('타입스크립트 완벽 가이드'); // =>프로퍼티가 선언되었습니다: title