01 · Concept

제네릭과 유틸리티 타입

제네릭은 타입을 매개변수로 받아 재사용 가능한 컴포넌트를 만드는 TypeScript의 핵심 기능입니다.

제네릭을 사용하면 타입 안전성을 유지하면서 유연한 코드를 작성할 수 있습니다. TypeScript는 Partial<T>, Pick<T,K>, Omit<T,K>, Record<K,V> 등 다양한 내장 유틸리티 타입을 제공하며, 조건부 타입과 infer를 활용해 커스텀 유틸리티 타입도 만들 수 있습니다.

02 · Interactive Demo

제네릭 타입 변환 시각화

각 유틸리티 타입을 선택하고 실행하여 타입 변환 과정을 확인하세요.

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

identity<string>("hello"); // "hello"
identity<number>(42);      // 42
Type Transformation
Input Type
T
→
Output Type
T
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// 제네릭 함수
function toArray<T>(value: T): T[] {
  return [value];
}

toArray<string>("hello"); // string[]
toArray<number>(42);      // number[]

// 제네릭 인터페이스
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

const userRes: ApiResponse<User> = {
  data: { name: "Kim", age: 25 },
  status: 200,
  message: "OK",
};
04 · Interview Point

면접 핵심 질문

제네릭은 타입을 매개변수화하는 기능입니다. 함수, 클래스, 인터페이스를 작성할 때 특정 타입에 고정하지 않고, 사용하는 시점에 타입을 지정할 수 있습니다. 이를 통해 타입 안전성을 유지하면서도 코드 재사용성을 높일 수 있습니다. Array<T>, Promise<T> 등이 대표적인 제네릭 타입입니다.
1. Partial<T> — 모든 속성을 선택적으로 변환 (업데이트 함수에 유용) 2. Pick<T,K> — 특정 속성만 추출 (API 응답 가공) 3. Omit<T,K> — 특정 속성 제외 (민감 정보 제거) 4. Record<K,V> — 키-값 매핑 타입 생성 5. ReturnType<T> — 함수 반환 타입 추출 6. Required<T> — 모든 속성을 필수로 변환
조건부 타입은 T extends U ? X : Y 형태의 타입 수준 삼항 연산자입니다. T가 U에 할당 가능하면 X, 아니면 Y 타입이 됩니다. infer 키워드와 함께 사용하면 타입을 추출할 수 있습니다. 예를 들어 ReturnType<T>은 T extends (...args: any[]) => infer R ? R : never 로 구현됩니다. 유니온 타입에 적용하면 분배 법칙이 적용되어 각 멤버에 대해 개별 평가됩니다.