topic난이도 · 약 20

타입 시스템 — 정적·동적·제네릭·유니온

컴파일 타임 검증(TS/Java) vs 런타임(JS/Python), 제네릭, null 안전성.

#타입#TypeScript#제네릭#유니온#Zod
왜 배우는가

TypeScript가 표준이 된 이유. Claude가 만든 코드의 타입이 맞는지, `any`가 남발됐는지 판단할 수 있어야 품질이 올라간다.

구분정적 타입 (Static)동적 타입 (Dynamic)
검증 시점컴파일 시실행 시
장점타입 버그 조기 발견, IDE 자동완성, 리팩터 안전빠른 프로토타이핑, 유연
단점약간의 학습 곡선런타임까지 버그 안 보임
예시TypeScript, Java, Go, RustJS, Python, Ruby
typescript
// ━━━ 기본 타입 ━━━
const n: number = 42;
const s: string = "hi";
const b: boolean = true;
const arr: number[] = [1, 2, 3];
const tuple: [string, number] = ["age", 25];

// ━━━ 유니온 · 교차 · 리터럴 ━━━
type Status = "idle" | "loading" | "success" | "error";   // 리터럴 유니온
function handle(s: Status) {
  if (s === "loading") { /* ... */ }
}

type User = { id: string; name: string };
type Admin = User & { permissions: string[] };            // 교차

// ━━━ 제네릭 ━━━
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}
first([1, 2, 3]);        // T = number
first(["a", "b"]);       // T = string

// API 응답 래퍼
type ApiResponse<T> = { data: T; meta: { total: number } };
type UserList = ApiResponse<User[]>;

// ━━━ null 안전 — 옵셔널 체이닝 · nullish 병합 ━━━
const name = user?.profile?.name ?? "익명";

제네릭은 "타입도 인자처럼" 받는 도구. `useState<User>()`, `Array<T>`가 익숙해야 Claude의 고급 타입을 읽을 수 있다.

`any` 남발은 TS의 암. Claude 생성 코드에 `any`가 보이면 "정확한 타입으로 교체해달라"고 요청. 불명확하면 `unknown`(명시적 검증 필요)이 `any`보다 훨씬 안전.

typescript
// ❌ any — 컴파일러 검증 포기
function parse(data: any) {
  return data.user.name.toUpperCase();   // 런타임 TypeError 위험
}

// ✅ unknown — 강제로 검증
function parse(data: unknown) {
  if (
    typeof data === "object" && data !== null &&
    "user" in data && typeof (data as any).user === "object"
  ) {
    // 여기서만 접근
  }
}

// ✅ Zod — 런타임 스키마 검증 (2026년 표준)
import { z } from "zod";
const UserSchema = z.object({
  id: z.string(),
  name: z.string().min(1),
  age: z.number().int().positive(),
});
const user = UserSchema.parse(apiData);   // 실패 시 throw, 성공 시 타입 주입

Zod/Valibot은 런타임 검증 + 타입 추론을 한 번에. 외부 API 응답·폼 입력에 표준.

실기 드릴 2문항
edit실기 드릴 · 단답형

타입이 실행 시가 아닌 컴파일 시점에 검증되는 것을 가리키는 용어는?

check_circle실기 드릴 · OX

TypeScript에서 `unknown`은 `any`보다 안전하다.