TypeScript 5 데코레이터 완전 가이드 - 실무 패턴·함정

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "experimentalDecorators": false
  }
}

function LogCall(label?: string) {
  return function (
    value: (...args: any[]) => any,
    context: ClassMethodDecoratorContext
  ) {
    const name = String(context.name);

    return function (this: any, ...args: any[]) {
      const tag = label ?? name;
      const start = Date.now();

      try {
        const result = value.apply(this, args);

        // Promise도 처리
        if (result && typeof (result as any).then === "function") {
          return (result as Promise<any>).finally(() => {
            const ms = Date.now() - start;
            console.log(`[${tag}] done in ${ms}ms`);
          });
        }

        const ms = Date.now() - start;
        console.log(`[${tag}] done in ${ms}ms`);
        return result;
      } catch (e) {
        const ms = Date.now() - start;
        console.log(`[${tag}] failed in ${ms}ms`);
        throw e;
      }
    };
  };
}

class UserService {
  @LogCall("getUser")
  async getUser(id: string) {
    // ...
    return { id };
  }
}

// 나쁜 예: this가 깨질 수 있음
return function (...args: any[]) {
  return value(...args);
};

return function (this: any, ...args: any[]) {
  return value.apply(this, args);
};

type AuthContext = { roles: string[] };

function RequireRole(role: string) {
  return function (
    value: (...args: any[]) => any,
    context: ClassMethodDecoratorContext
  ) {
    return function (this: any, ...args: any[]) {
      const auth: AuthContext | undefined = this.auth;
      if (!auth || !auth.roles.includes(role)) {
        throw new Error(`Forbidden: missing role ${role}`);
      }
      return value.apply(this, args);
    };
  };
}

class AdminService {
  constructor(public auth: AuthContext) {}

  @RequireRole("admin")
  deleteUser(userId: string) {
    return { ok: true, userId };
  }
}

function Cached(options?: { ttlMs?: number; key?: (...args: any[]) => string }) {
  const ttlMs = options?.ttlMs ?? 5_000;
  const keyFn = options?.key ?? ((...args: any[]) => JSON.stringify(args));

  return function (
    value: (...args: any[]) => any,
    context: ClassMethodDecoratorContext
  ) {
    // 인스턴스별 캐시
    const cache = new Map<string, { exp: number; v: any }>();

    return function (this: any, ...args: any[]) {
      const k = keyFn(...args);
      const now = Date.now();
      const hit = cache.get(k);
      if (hit && hit.exp > now) return hit.v;

      const v = value.apply(this, args);
      cache.set(k, { exp: now + ttlMs, v });
      return v;
    };
  };
}

class ProductService {
  @Cached({ ttlMs: 2_000 })
  getPrice(productId: string) {
    return Math.random();
  }
}

function Retry(options?: { retries?: number; delayMs?: number }) {
  const retries = options?.retries ?? 2;
  const delayMs = options?.delayMs ?? 200;

  const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

  return function (
    value: (...args: any[]) => Promise<any>,
    context: ClassMethodDecoratorContext
  ) {
    return async function (this: any, ...args: any[]) {
      let lastErr: unknown;
      for (let i = 0; i <= retries; i++) {
        try {
          return await value.apply(this, args);
        } catch (e) {
          lastErr = e;
          if (i < retries) await sleep(delayMs * (i + 1));
        }
      }
      throw lastErr;
    };
  };
}

class ApiClient {
  @Retry({ retries: 3, delayMs: 150 })
  async fetchUser(id: string) {
    const res = await fetch(`https://example.com/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  }
}

function WithTraceId() {
  return function (
    value: (...args: any[]) => any,
    context: ClassMethodDecoratorContext
  ) {
    const name = String(context.name);

    return function (this: any, ...args: any[]) {
      const traceId = this.traceId ?? `t_${Math.random().toString(16).slice(2)}`;
      const prev = this.traceId;
      this.traceId = traceId;

      try {
        console.log(`[trace=${traceId}] enter ${name}`);
        return value.apply(this, args);
      } finally {
        console.log(`[trace=${traceId}] exit ${name}`);
        this.traceId = prev;
      }
    };
  };
}

const registry = new Set<object>();

function AutoRegister() {
  return function (value: Function, context: ClassDecoratorContext) {
    context.addInitializer(function () {
      // 여기서 this는 인스턴스
      registry.add(this);
    });
  };
}

@AutoRegister()
class Worker {
  run() {}
}

new Worker();
console.log(registry.size);