TypeScript 5.x 새로운 기능 총정리

개요

TypeScript 5.x는 더 나은 타입 추론, 새로운 문법, 성능 개선을 제공합니다. 이 글에서는 실무에서 바로 활용할 수 있는 주요 기능들을 살펴봅니다.

1. 표준 데코레이터 (ES Decorators)

TypeScript 5.0에서 ECMAScript 표준 데코레이터가 도입되었습니다.

클래스 데코레이터

function logged<T extends new (...args: any[]) => any>(
  target: T,
  context: ClassDecoratorContext
) {
  return class extends target {
    constructor(...args: any[]) {
      super(...args)
      console.log(`${context.name} 인스턴스 생성됨`)
    }
  }
}

@logged
class UserService {
  constructor(public name: string) {}
}

const service = new UserService("test")
// 출력: "UserService 인스턴스 생성됨"

메서드 데코레이터

function log(
  target: Function,
  context: ClassMethodDecoratorContext
) {
  return function (this: any, ...args: any[]) {
    console.log(`${String(context.name)} 호출됨, 인자: ${JSON.stringify(args)}`)
    return target.apply(this, args)
  }
}

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

필드 데코레이터

function uppercase(
  target: undefined,
  context: ClassFieldDecoratorContext
) {
  return function (initialValue: string) {
    return initialValue.toUpperCase()
  }
}

class Person {
  @uppercase
  name = "john"  // 실제 값: "JOHN"
}

2. const 타입 파라미터

제네릭에서 리터럴 타입을 유지합니다.

// 기존: 타입이 넓어짐
function getConfig<T>(config: T) {
  return config
}
const config1 = getConfig({ theme: "dark" })
// 타입: { theme: string }

// const 사용: 리터럴 타입 유지
function getConfigConst<const T>(config: T) {
  return config
}
const config2 = getConfigConst({ theme: "dark" })
// 타입: { readonly theme: "dark" }

실용적인 예제

function defineRoutes<const T extends readonly {
  path: string
  method: "GET" | "POST" | "PUT" | "DELETE"
}[]>(routes: T) {
  return routes
}

const routes = defineRoutes([
  { path: "/users", method: "GET" },
  { path: "/users", method: "POST" }
] as const)

// routes[0].method 타입: "GET" (string이 아님!)

3. satisfies 연산자

타입을 검증하면서 추론된 타입을 유지합니다.

type Colors = Record<string, [number, number, number] | string>

// 문제: 타입 어노테이션으로 구체적 타입 정보 손실
const colorsAnnotated: Colors = {
  red: [255, 0, 0],
  green: "#00ff00"
}
colorsAnnotated.red.map(x => x)  // 에러! string | number[] 타입

// 해결: satisfies로 검증하면서 추론 유지
const colors = {
  red: [255, 0, 0],
  green: "#00ff00"
} satisfies Colors

colors.red.map(x => x)      // OK! [number, number, number] 타입
colors.green.toUpperCase()  // OK! string 타입

실용적인 예제

interface Config {
  apiUrl: string
  timeout: number
  features: Record<string, boolean>
}

const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  features: {
    darkMode: true,
    analytics: false
  }
} satisfies Config

// config.features.darkMode는 boolean 타입 (Record<string, boolean>이 아님)
if (config.features.darkMode) {
  // 타입 추론이 정확함
}

4. 개선된 Enum

숫자 Enum 개선

enum Direction {
  Up,
  Down,
  Left,
  Right
}

// 이전: 모든 숫자 허용
// 현재: 정의된 값만 허용
function move(dir: Direction) {}

move(Direction.Up)  // OK
move(0)             // OK (Direction.Up과 같음)
move(100)           // 에러! (5.0+에서 더 엄격)

5. 모듈 해석 개선

bundler 모드

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "ESNext"
  }
}

최신 번들러(Vite, esbuild, webpack 5 등)에 최적화된 모듈 해석 전략입니다.

exports 필드 지원

// package.json
{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  }
}

6. 타입 가드 개선

제어 흐름 분석 개선

function processValue(value: string | number | null) {
  if (typeof value === "string") {
    // value: string
    return value.toUpperCase()
  }

  if (value !== null) {
    // value: number (자동 추론!)
    return value.toFixed(2)
  }

  // value: null
  return "empty"
}

switch(true) 패턴 지원

function describe(value: unknown): string {
  switch (true) {
    case typeof value === "string":
      return `문자열: ${value.length}자`
    case typeof value === "number":
      return `숫자: ${value.toFixed(2)}`
    case value === null:
      return "null"
    default:
      return "알 수 없음"
  }
}

7. Infer 개선

extends 절에서 infer 제약

type GetFirstString<T> = T extends [infer S extends string, ...any[]]
  ? S
  : never

type Test1 = GetFirstString<["hello", 1, 2]>  // "hello"
type Test2 = GetFirstString<[1, 2, 3]>        // never

8. 성능 개선

빌드 속도

• tsc --build 10-25% 빠름
• 타입 체크 속도 개선
• 메모리 사용량 감소

패키지 크기

• npm 패키지 크기 약 60% 감소
• 더 빠른 설치

마이그레이션 팁

// tsconfig.json 권장 설정
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "verbatimModuleSyntax": true
  }
}

결론

TypeScript 5.x는 타입 시스템의 표현력과 개발자 경험을 크게 향상시켰습니다. 특히 satisfies 연산자와 const 타입 파라미터는 일상적인 코드에서 즉시 활용할 수 있는 실용적인 기능입니다.