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가 있는 객체
class DbConnection {
  constructor(public readonly id: string) {}

  [Symbol.dispose]() {
    console.log(`연결 ${this.id} 종료`);
  }
}

function getConnection() {
  return new DbConnection("conn-001");
}

// using: 블록 탈출 시 자동으로 dispose() 호출
{
  using conn = getConnection();
  console.log(`연결 ${conn.id} 사용 중`);
  // 블록 종료 시 자동으로 "연결 conn-001 종료" 출력
}

// await using: 비동기 자원 해제
async function processFile() {
  await using file = await openFile("data.txt");
  // 처리 완료 후 자동으로 await file[Symbol.asyncDispose]() 호출
}

// 문제: T가 기본값으로도 추론되어 타입이 넓어짐
function createState<T>(initial: T, fallback: T): T {
  return initial ?? fallback;
}

// fallback이 초기값에 영향을 주면 안 될 때
const state = createState("active", "inactive");
// T: "active" | "inactive" (원하지 않을 수 있음)

// ✅ NoInfer 사용
function createStateBetter<T>(initial: T, fallback: NoInfer<T>): T {
  return initial ?? fallback;
}

const state2 = createStateBetter("active", "inactive");
// T: "active", fallback은 "active" 타입으로 검증됨
// createStateBetter("active", "unknown") // 오류!

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "Node16",
    "moduleResolution": "Node16",
    "strict": true,
    "exactOptionalPropertyTypes": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "verbatimModuleSyntax": true
  }
}