TypeScript 데코레이터 - 클래스와 메서드 메타데이터 | 백틱

typescriptdecorators

TypeScript 데코레이터 - 클래스와 메서드 메타데이터

강경원

강경원· 2026년 2월 10일· 읽는 데 약 4분

조회 0

TypeScript 데코레이터는 클래스, 메서드, 프로퍼티에 메타데이터를 추가하는 실험적 기능입니다.
Angular, NestJS 같은 프레임워크에서 널리 사용되며, tsconfig.json에서 활성화해야 합니다.

1. 데코레이터 설정

// tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

2. 클래스 데코레이터

function Logger(constructor: Function) {
  console.log("클래스 생성:", constructor.name);
}

@Logger
class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

3. 메서드 데코레이터

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const method = descriptor.;

  descriptor. =  () {
    .(, args);
     method.(, args);
  };
}

  {
  
  (: , : ):  {
     a + b;
  }
}

function ReadOnly(target: any, propertyName: string) {
  let value: any;

  Object.defineProperty(target, propertyName, {
    get: () => value,
    set: (newValue: any) => {
      if (value === undefined) {
        value = newValue;
      }
    },
  });
}

class User {
  @ReadOnly
  id: number;
}

function Required(target: any, propertyName: string, parameterIndex: number) {
  // 파라미터 메타데이터 저장
}

class UserService {
  getUser(@Required id: number, name: string) {
    // ...
  }
}

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

class Service {
  @Log("API")
  fetchData() {
    // ...
  }
}

function Controller(path: string) {
  return function (constructor: Function) {
    // 컨트롤러 메타데이터 저장
  };
}

function Get(endpoint: string) {
  return function (target: any, propertyName: string, descriptor: PropertyDescriptor) {
    // 라우트 메타데이터 저장
  };
}

@Controller("/users")
class UserController {
  @Get("/")
  getUsers() {
    return [];
  }
}