TypeScript 데코레이터 이해

TypeScript 데코레이터는 런타임에 클래스, 메서드, 속성 및 매개변수에 기능을 추가하는 강력한 방법을 제공합니다. 이는 종종 Angular와 같은 프레임워크에서 종속성 주입, 로깅, 검증 등에 사용됩니다. 이 문서에서는 TypeScript의 다양한 유형의 데코레이터와 이를 효과적으로 사용하는 방법을 설명합니다.

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

TypeScript의 데코레이터는 @ 심볼로 접두사가 붙은 함수로, 클래스, 메서드 또는 속성과 같은 다양한 요소에 첨부할 수 있습니다. 코드를 직접 변경하지 않고도 첨부된 코드의 동작을 수정할 수 있습니다.

장식자 유형

• 클래스 데코레이터: 전체 클래스에 적용됩니다.
• 메서드 데코레이터: 클래스 내의 메서드에 적용됩니다.
• 속성 장식자: 클래스 내의 속성에 적용됩니다.
• 매개변수 데코레이터: 클래스의 메서드 매개변수에 적용됩니다.

TypeScript에서 데코레이터를 활성화하는 방법

데코레이터를 사용하려면 먼저 tsconfig.json 파일에서 "experimentalDecorators"을 true로 설정하여 데코레이터를 활성화해야 합니다.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

클래스 데코레이터

클래스 데코레이터는 전체 클래스에 적용됩니다. 메타데이터를 추가하거나 클래스의 동작을 수정하는 데 유용합니다.

function Controller(route: string) {
  return function (target: Function) {
    target.prototype.route = route;
  };
}

@Controller('/api/user')
class UserController {
  // Class logic
}

console.log(new UserController().route); // Outputs: '/api/user'

메서드 데코레이터

메서드 데코레이터는 클래스 내의 메서드에 적용됩니다. 이러한 데코레이터는 메서드의 동작을 수정하거나 기록하는 데 사용할 수 있습니다.

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyName} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

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

const calculator = new Calculator();
calculator.add(2, 3); // Logs: 'Calling add with arguments: 2,3'

부동산 장식업체

속성 데코레이터는 클래스의 속성에 기능을 추가하는 데 사용됩니다. 유효성 검사나 속성에 메타데이터를 추가하는 데 유용할 수 있습니다.

function ReadOnly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}

class Person {
  @ReadOnly
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Error: Cannot assign to read only property 'name'

매개변수 데코레이터

매개변수 데코레이터는 메서드 매개변수에 대한 정보를 수정하거나 기록하는 데 사용됩니다.

function LogParameter(target: any, propertyName: string, index: number) {
  const metadataKey = `log_${propertyName}_parameters`;
  
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Demo {
  method(@LogParameter param1: string, @LogParameter param2: number) {
    // Method logic
  }
}

결론

TypeScript의 데코레이터는 코드의 구조를 수정하지 않고도 코드의 기능을 향상시키는 강력한 방법을 제공합니다. 클래스, 메서드, 속성 및 매개변수 데코레이터를 사용하는 방법을 이해하면 로깅, 검증 및 종속성 주입과 같은 고급 기능을 구현할 수 있습니다. 데코레이터는 TypeScript의 핵심 기능으로, 특히 대규모 애플리케이션에서 개발 워크플로를 크게 개선할 수 있습니다.