TypeScript 고급 타입 - 유틸리티 타입과 조건부 타입 | 백틱

typescriptadvanced-types

TypeScript 고급 타입 - 유틸리티 타입과 조건부 타입

강경원

강경원· 2026년 2월 10일· 읽는 데 약 3분

조회 0

TypeScript의 고급 타입 기능을 활용하면 타입을 더 정확하고 재사용 가능하게 만들 수 있습니다.
이 글에서는 유틸리티 타입, 조건부 타입, 매핑된 타입 등을 정리합니다.

1. 유틸리티 타입

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

// Partial: 모든 속성을 선택적으로
type PartialUser = Partial<User>;

// Required: 모든 속성을 필수로
type RequiredUser = Required<PartialUser>;

// Pick: 특정 속성만 선택
type UserName = Pick<User, "name" | "email">;

// Omit: 특정 속성 제외
type UserWithoutAge = Omit<User, "age">;

// Record: 키-값 타입 정의
type UserMap = Record<string, User>;

2. 조건부 타입

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

type A = IsArray<[]>; 
 B = <>; 


 <T> = T  (...: []) => infer R ? R : ;

 getReturnType<T  (...: []) => >(
  : T
): <T> {
   ()  <T>;
}

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

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

// 실제 사용
type ReadonlyUser = Readonly<User>;
type OptionalUser = Optional<User>;

type EventName = `on${Capitalize<string>}`;
// "onClick" | "onChange" | "onSubmit" ...

type ApiEndpoint = `/api/${string}`;
// "/api/users" | "/api/products" ...

// 실제 활용
function createHandler(event: EventName) {
  // ...
}

type UserId = number & { __brand: "UserId" };
type ProductId = number & { __brand: "ProductId" };

function getUser(id: UserId) {
  // ...
}

const userId = 123 as UserId;
const productId = 456 as ProductId;

getUser(userId); // ✅ OK
getUser(productId); // ❌ 타입 에러

// API 응답 타입 변환
type ApiResponse<T> = {
  data: T;
  status: number;
  message: string;
};

// 에러 타입
type ApiError = {
  error: string;
  code: number;
};

// 유니온 타입
type Result<T> = ApiResponse<T> | ApiError;