TypeScript 5 새 기능 — satisfies 연산자와 데코레이터 실전 활용

// ❌ 기존 방식의 문제
type Color = "red" | "green" | "blue";
type ColorMap = Record<string, string | number[]>;

// as 단언: 타입 검증 O, 추론 X
const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
} as ColorMap;

// 이제 palette.red는 string | number[] 로 추론됨
// .map()을 쓰려면 타입 단언 필요
palette.red.map(x => x); // 오류! string | number[]에 map 없음

// ✅ satisfies 연산자
type Color = "red" | "green" | "blue";
type ColorMap = Record<Color, string | number[]>;

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
} satisfies ColorMap;

// 이제 타입 검증 O, 리터럴 추론 O
palette.red.map(x => x);      // ✅ number[] 유지됨
palette.green.toUpperCase();   // ✅ string 유지됨
const wrong = { purple: "purple" } satisfies ColorMap; // ❌ 오류: "purple"은 Color 아님

interface ApiConfig {
  baseUrl: string;
  timeout: number;
  retries: number;
}

// satisfies로 타입 검증 + 정확한 값 추론 유지
const config = {
  baseUrl: "https://api.example.com",
  timeout: 5000,
  retries: 3,
} satisfies ApiConfig;

// config.timeout은 number가 아닌 5000 (리터럴 타입)
type TimeoutType = typeof config.timeout; // 5000

type Route = {
  path: string;
  component: React.ComponentType;
  auth?: boolean;
};

const routes = [
  { path: "/", component: Home },
  { path: "/dashboard", component: Dashboard, auth: true },
] satisfies Route[];

// routes[0].path는 "/" (리터럴) 유지, Route 검증도 통과

type TranslationKey = "hello" | "goodbye" | "welcome";
type Translations = Record<TranslationKey, string>;

const ko = {
  hello: "안녕하세요",
  goodbye: "안녕히 가세요",
  welcome: "환영합니다",
} satisfies Translations;

const en = {
  hello: "Hello",
  goodbye: "Goodbye",
  // welcome 누락 → 컴파일 오류 발생! ✅
} satisfies Translations;

// ✅ TypeScript 5 표준 데코레이터
function sealed(target: typeof SealedClass) {
  Object.seal(target);
  Object.seal(target.prototype);
}

@sealed
class SealedClass {
  greet() { return "Hello!"; }
}

function log(target: any, context: ClassMethodDecoratorContext) {
  const methodName = String(context.name);

  return function (this: any, ...args: any[]) {
    console.log(`[${methodName}] 호출됨, 인수:`, args);
    const result = target.call(this, ...args);
    console.log(`[${methodName}] 반환값:`, result);
    return result;
  };
}

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

const calc = new Calculator();
calc.add(1, 2);
// [add] 호출됨, 인수: [1, 2]
// [add] 반환값: 3

function readonly(target: any, context: ClassAccessorDecoratorContext) {
  return {
    set() {
      throw new Error(`${String(context.name)}은 읽기 전용입니다.`);
    }
  };
}

class Config {
  @readonly
  accessor version = "1.0.0";
}

const cfg = new Config();
console.log(cfg.version); // "1.0.0"
cfg.version = "2.0.0";    // ❌ 오류 발생

// 메타데이터 API 활용
function validate(target: any, context: ClassFieldDecoratorContext) {
  context.metadata[context.name] = { required: true };
}

class UserForm {
  @validate
  name!: string;

  @validate
  email!: string;
}

// 메타데이터 읽기
const metadata = UserForm[Symbol.metadata];
console.log(metadata); // { name: { required: true }, email: { required: true } }

// ❌ 기존 방식
function identity<T>(value: T): T {
  return value;
}

const result = identity(["a", "b", "c"]);
// result: string[] (리터럴 손실)

// ✅ const 타입 파라미터
function identityConst<const T>(value: T): T {
  return value;
}

const result2 = identityConst(["a", "b", "c"]);
// result2: readonly ["a", "b", "c"] (리터럴 유지!)

function createRoute<const Path extends string>(path: Path) {
  return { path, url: () => `https://app.example.com${path}` };
}

const homeRoute = createRoute("/");
// homeRoute.path: "/" (리터럴 유지)

const dashRoute = createRoute("/dashboard");
// dashRoute.path: "/dashboard" (리터럴 유지)

// tsconfig.json
{
  "extends": [
    "@tsconfig/strictest/tsconfig.json",
    "@tsconfig/node18/tsconfig.json",
    "./custom.tsconfig.json"
  ],
  "compilerOptions": {
    "outDir": "dist"
  }
}

// Symbol.dispose가 있는 객체
cla

---

**참고:** [한국은행 경제통계](https://ecos.bok.or.kr)


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "TypeScript 5 새 기능 — satisfies 연산자와 데코레이터 실전 활용",
  "url": "https://millionscode.com/blog/typescript-5-new-features-satisfies-operator-decorators-practical-guide",
  "author": {
    "@type": "Person",
    "name": "MillionsCode",
    "url": "https://millionscode.com/about"
  },
  "publisher": {
    "@type": "Organization",
    "name": "MillionsCode",
    "logo": {
      "@type": "ImageObject",
      "url": "https://millionscode.com/favicon.svg",
      "width": 512,
      "height": 512
    }
  },
  "image": {
    "@type": "ImageObject",
    "url": "https://millionscode.com/og-default.png",
    "width": 1200,
    "height": 628
  },
  "dateModified": "2026-05-19"
}
</script>


## 자주 묻는 질문 (FAQ)

### Q1. TypeScript 5에서 가장 중요한 새 기능은 무엇인가요?
A: satisfies 연산자, 표준 데코레이터, const 타입 파라미터가 실무 영향이 큰 기능입니다.

### Q2. satisfies 연산자는 언제 쓰나요?
A: 객체의 구체적 추론은 유지하면서 특정 타입 조건을 만족하는지 검증할 때 사용합니다.

### Q3. satisfies와 as의 차이는 무엇인가요?
A: as는 타입 단언이고 satisfies는 타입 검증이라 잘못된 구조를 더 안전하게 잡아줍니다.

### Q4. TypeScript 5 데코레이터는 기존과 다른가요?
A: 표준 데코레이터는 TC39 흐름을 따르며 기존 experimentalDecorators와 동작 차이가 있습니다.

### Q5. const 타입 파라미터는 왜 유용한가요?
A: 제네릭 함수에서 리터럴 타입 추론을 보존해 더 정확한 타입을 만들 수 있습니다.

### Q6. TypeScript 5 업그레이드 전 확인할 것은?
A: tsconfig, 데코레이터 사용처, 빌드 도구, ESLint, 라이브러리 타입 호환성을 확인하세요.