TypeScript에서 데코레이터를 사용하는 방법

TypeScript의 데코레이터는 개발자가 클래스, 메서드, 속성 및 매개변수에 추가 기능을 추가할 수 있는 강력한 기능입니다. 데코레이터는 실제 구조를 변경하지 않고도 기존 코드의 동작을 수정할 수 있는 방법을 제공합니다. 이 가이드에서는 TypeScript에서 데코레이터를 사용하는 방법을 따라하기 쉬운 예제와 함께 설명합니다.

데코레이터란 무엇인가요?

데코레이터는 클래스, 메서드, 속성 또는 매개변수에 적용할 수 있는 특수 함수입니다. 런타임에 호출되며 개발자가 선언적 방식으로 코드에 주석을 달고 수정할 수 있습니다. TypeScript 프로젝트에서 데코레이터를 활성화하려면 tsconfig.json 파일에서 experimentalDecorators 플래그를 true로 설정해야 합니다.

TypeScript에서 데코레이터 활성화

데코레이터를 사용하려면 TypeScript 컴파일러가 데코레이터를 인식하도록 구성해야 합니다. 이는 tsconfig.json 파일에서 experimentalDecorators 플래그를 true로 설정하여 수행할 수 있습니다.

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

데코레이터를 활성화하면 프로젝트 전체에서 사용할 수 있습니다.

클래스 데코레이터 만들기

클래스 데코레이터는 클래스 선언에 적용되며 클래스 정의를 수정하거나 대체하는 데 사용할 수 있습니다. 클래스 데코레이터는 데코레이터가 데코레이트하는 클래스 바로 위에 선언되며, @ 심볼을 사용합니다.

function LogClass(target: Function) {
  console.log(`Class ${target.name} is created.`);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('Alice');

이 예에서 LogClass 데코레이터는 Person 클래스가 생성될 때 메시지를 로깅합니다. 데코레이터는 단일 인수, 즉 데코레이트되는 클래스의 생성자를 취하는 함수로 정의됩니다.

메서드 데코레이터

메서드 데코레이터는 클래스 내의 메서드에 적용됩니다. 이를 통해 개발자는 메서드 호출을 가로채거나, 동작을 수정하거나, 메서드가 실행되기 전이나 실행된 후에 추가 작업을 수행할 수 있습니다.

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

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Calculator {
  @LogMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3);

여기서 LogMethod 데코레이터는 add 메서드가 호출될 때마다 메서드 이름과 인수를 로깅합니다. 원래 메서드를 새 함수에 래핑하여 원래 메서드에 위임하기 전에 로깅을 수행합니다.

부동산 장식업체

속성 데코레이터는 클래스 속성의 동작을 관찰하거나 수정하는 데 사용됩니다. 메서드 데코레이터와 달리 속성 값 자체에는 액세스할 수 없지만 속성에 메타데이터를 추가할 수 있습니다.

function ReadOnly(target: Object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Book {
  @ReadOnly
  title: string = 'TypeScript Guide';
}

const myBook = new Book();
myBook.title = 'New Title'; // This will cause an error in strict mode

이 예제에서 ReadOnly 데코레이터는 Book 클래스의 title 속성에 적용되어 writable을 false로 설정하여 읽기 전용으로 만듭니다.

매개변수 데코레이터

매개변수 데코레이터는 메서드 매개변수에 주석을 달거나 수정하는 데 사용됩니다. 이들은 세 가지 인수를 받습니다. 대상 객체, 메서드 이름, 매개변수 인덱스입니다.

function LogParameter(target: Object, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter in position ${parameterIndex} at ${propertyKey} method is decorated.`);
}

class UserService {
  greet(@LogParameter message: string): void {
    console.log(message);
  }
}

const userService = new UserService();
userService.greet('Hello, TypeScript!');

이 예에서 LogParameter 데코레이터는 UserService 클래스의 greet 메서드의 message 매개변수에 적용됩니다. 데코레이터는 데코레이트되는 매개변수에 대한 정보를 로깅합니다.

결론

TypeScript의 데코레이터는 구조를 변경하지 않고도 코드 기능을 강화하는 강력한 방법을 제공합니다. 클래스, 메서드, 속성 및 매개변수 데코레이터를 활용함으로써 개발자는 프로젝트 전반에 재사용 가능한 기능을 쉽게 추가할 수 있습니다. 이 가이드에 제공된 예제를 사용하면 TypeScript에서 데코레이터를 사용하기 쉽게 시작할 수 있습니다.