TypeScript 5.0 새로운 기능 완벽 가이드: 데코레이터, const 타입, 성능 개선

// 실행 시간 측정 데코레이터
function logged<t extends="" (...args:="" any[])=""> any>(
  originalMethod: T,
  context: ClassMethodDecoratorContext
) {
  const methodName = String(context.name);

  return function (this: any, ...args: Parameters<t>): ReturnType<t> {
    console.log(`[${methodName}] 호출됨, 인자:`, args);
    const start = performance.now();

    const result = originalMethod.apply(this, args);

    const end = performance.now();
    console.log(`[${methodName}] 완료, 소요시간: ${(end - start).toFixed(2)}ms`);

    return result;
  };
}

class OrderService {
  @logged
  processOrder(orderId: string, items: Item[]) {
    // 주문 처리 로직
    return { success: true, orderId };
  }
}

// 출력:
// [processOrder] 호출됨, 인자: ["ord-123", [...]]
// [processOrder] 완료, 소요시간: 45.23ms

function validate(min: number, max: number) {
  return function (
    target: undefined,
    context: ClassFieldDecoratorContext
  ) {
    return function (initialValue: number) {
      if (initialValue < min || initialValue > max) {
        throw new Error(
          `${String(context.name)}는 ${min}~${max} 범위여야 합니다`
        );
      }
      return initialValue;
    };
  };
}

class Product {
  @validate(0, 100)
  discountRate: number = 10;  // OK

  @validate(1, 1000000)
  price: number = 0;  // Error: price는 1~1000000 범위여야 합니다
}

// 기존 방식: 타입이 넓어짐
function getRoutes<t>(routes: T): T {
  return routes;
}

const routes1 = getRoutes(["/home", "/about", "/contact"]);
// 타입: string[]  (넓은 타입으로 추론)

// TypeScript 5.0: const로 리터럴 유지
function getRoutes<const t="">(routes: T): T {
  return routes;
}

const routes2 = getRoutes(["/home", "/about", "/contact"]);
// 타입: readonly ["/home", "/about", "/contact"]  (정확한 리터럴)

function createRouter<const routes="" extends="" readonly="" string[]="">(
  routes: Routes
) {
  return {
    navigate(to: Routes[number]) {
      console.log(`Navigating to ${to}`);
    }
  };
}

const router = createRouter(["/home", "/profile", "/settings"] as const);

router.navigate("/home");     // OK
router.navigate("/profile");  // OK
router.navigate("/unknown");  // Error: 허용되지 않는 경로

enum Status {
  Pending = 1,
  Active = 2,
  Completed = 1 + 2,  // 계산된 값
}

function handleStatus(status: Status) {
  // 5.0에서는 모든 케이스를 exhaustive하게 체크 가능
  switch (status) {
    case Status.Pending:
      return "대기중";
    case Status.Active:
      return "진행중";
    case Status.Completed:
      return "완료";
    // default 없어도 에러 없음 (모든 케이스 처리됨)
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "noEmit": true
  }
}

// 타입 전용 import를 명시적으로 표시
import type { User } from "./types";  // 컴파일 시 제거됨
import { validateUser } from "./utils";  // 런타임에 유지됨

# 업그레이드 명령
npm install typescript@5 --save-dev

# 타입 체크 실행
npx tsc --noEmit