Search

Search through articles and snippets by title, tags, or content.

Back to Articles
TypeScript 고급 패턴: 실전에서 바로 쓰는 타입 기법
TypeScriptTypeScriptType SystemAdvanced

TypeScript 고급 패턴: 실전에서 바로 쓰는 타입 기법

Conditional Types, Template Literal Types, Mapped Types 등 TypeScript의 고급 타입 시스템을 실전 예제로 익혀봅니다.

D
DevBlog
Feb 8, 2026
12 min read

Conditional Types

타입 레벨에서 조건 분기를 할 수 있습니다:

type IsString<T> = T extends string ? "yes" : "no";
 
type A = IsString<string>; // "yes"
type B = IsString<number>; // "no"

infer 키워드

infer를 사용하면 타입에서 특정 부분을 추출할 수 있습니다:

type ReturnType<T> = T extends (...args: unknown[]) => infer R ? R : never;
 
type Fn = () => string;
type Result = ReturnType<Fn>; // string

Template Literal Types

문자열 타입을 프로그래밍적으로 조합할 수 있습니다:

type EventName<T extends string> = `on${Capitalize<T>}`;
 
type ClickEvent = EventName<"click">; // "onClick"
type FocusEvent = EventName<"focus">; // "onFocus"

Mapped Types

기존 타입의 각 프로퍼티를 변환할 수 있습니다:

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
 
type Optional<T> = {
  [P in keyof T]?: T[P];
};

실전 팁: 라이브러리 개발 시 Mapped Types를 활용하면 사용자에게 타입 안전한 API를 제공할 수 있습니다.

실전 예제: API Response 타입

interface ApiResponse<T> {
  data: T;
  error: null;
  status: "success";
}
 
interface ApiError {
  data: null;
  error: string;
  status: "error";
}
 
type Result<T> = ApiResponse<T> | ApiError;
  • Conditional Types로 동적 타입 추론
  • Template Literal Types로 문자열 패턴 타입 생성
  • Mapped Types로 기존 타입의 변환

Comments