TypeScript 제네릭 마스터하기

제네릭(Generic)은 타입스크립트에서 타입을 파라미터처럼 다루는 기능입니다.

기본 문법

function identity<T>(arg: T): T {
  return arg
}

const num = identity<number>(42)   // T = number
const str = identity('hello')      // T = string (추론)

제네릭 제약 (Constraints)

interface HasLength {
  length: number
}

function logLength<T extends HasLength>(arg: T): T {
  console.log(arg.length)
  return arg
}

logLength('hello')    // OK
logLength([1, 2, 3])  // OK
logLength(42)         // Error: number에는 length가 없음

유틸리티 타입

타입스크립트는 제네릭 기반의 유용한 유틸리티 타입을 제공합니다.

유틸리티	설명	예시
Partial<T>	모든 속성을 선택적으로	Partial<User>
Required<T>	모든 속성을 필수로	Required<Config>
Pick<T, K>	특정 속성만 선택	Pick<User, 'id' | 'name'>
Omit<T, K>	특정 속성 제외	Omit<User, 'password'>
Record<K, V>	키-값 맵 타입	Record<string, number>

조건부 타입 (Conditional Types)

type IsArray<T> = T extends unknown[] ? true : false

type A = IsArray<string[]>  // true
type B = IsArray<number>    // false

infer 키워드

type ReturnType<T> = T extends (...args: unknown[]) => infer R ? R : never

function getData(): { id: number; name: string } {
  return { id: 1, name: 'Alice' }
}

type Data = ReturnType<typeof getData>
// { id: number; name: string }

실전 패턴: API 응답 래퍼

interface ApiResponse<T> {
  data: T
  status: number
  message: string
}

async function fetchUser(id: number): Promise<ApiResponse<User>> {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
}

제네릭을 잘 활용하면 코드 재사용성을 높이면서도 완전한 타입 안전성을 유지할 수 있습니다.