topic★★★★★난이도 · 약 20분
타입 시스템 — 정적·동적·제네릭·유니온
컴파일 타임 검증(TS/Java) vs 런타임(JS/Python), 제네릭, null 안전성.
#타입#TypeScript#제네릭#유니온#Zod
왜 배우는가
TypeScript가 표준이 된 이유. Claude가 만든 코드의 타입이 맞는지, `any`가 남발됐는지 판단할 수 있어야 품질이 올라간다.
| 구분 | 정적 타입 (Static) | 동적 타입 (Dynamic) |
|---|---|---|
| 검증 시점 | 컴파일 시 | 실행 시 |
| 장점 | 타입 버그 조기 발견, IDE 자동완성, 리팩터 안전 | 빠른 프로토타이핑, 유연 |
| 단점 | 약간의 학습 곡선 | 런타임까지 버그 안 보임 |
| 예시 | TypeScript, Java, Go, Rust | JS, 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`보다 안전하다.