TypeScript 유틸리티 타입 활용하기
개요
TypeScript는 강력한 유틸리티 타입을 제공하여 타입 변환 작업을 용이하게 합니다.
주요 유틸리티 타입
1. Partial
모든 속성을 선택적으로 만듭니다.
interface User {
id: number;
name: string;
email: string;
}
// ✅ 일부 속성만 업데이트
function updateUser(id: number, updates: Partial<User>) {
// updates는 id, name, email 중 일부만 가질 수 있음
}
updateUser(1, { name: "New Name" }); // OK
updateUser(1, { email: "new@email.com" }); // OK2. Required
모든 속성을 필수로 만듭니다.
interface Config {
host?: string;
port?: number;
timeout?: number;
}
type RequiredConfig = Required<Config>;
// { host: string; port: number; timeout: number }3. Pick<T, K>
특정 속성만 선택합니다.
interface Article {
id: number;
title: string;
content: string;
author: string;
createdAt: Date;
}
type ArticlePreview = Pick<Article, 'id' | 'title' | 'author'>;
// { id: number; title: string; author: string }4. Omit<T, K>
특정 속성을 제외합니다.
type ArticleWithoutContent = Omit<Article, 'content'>;
// id, title, author, createdAt만 포함5. Record<K, T>
키-값 쌍을 정의합니다.
type Role = 'admin' | 'user' | 'guest';
type Permissions = Record<Role, string[]>;
const permissions: Permissions = {
admin: ['read', 'write', 'delete'],
user: ['read', 'write'],
guest: ['read'],
};6. Readonly
모든 속성을 읽기 전용으로 만듭니다.
interface Point {
x: number;
y: number;
}
const point: Readonly<Point> = { x: 10, y: 20 };
// point.x = 5; // Error: readonly7. ReturnType
함수의 반환 타입을 추출합니다.
function getUser() {
return { id: 1, name: "Alice" };
}
type User = ReturnType<typeof getUser>;
// { id: number; name: string }실전 예제
API 응답 타입 생성
interface ApiResponse<T> {
data: T;
status: number;
message: string;
}
type UserResponse = ApiResponse<User>;
type UsersResponse = ApiResponse<User[]>;폼 데이터 타입
interface FullUser {
id: number;
name: string;
email: string;
password: string;
createdAt: Date;
}
// 생성 시: id와 createdAt 제외
type CreateUserDto = Omit<FullUser, 'id' | 'createdAt'>;
// 업데이트 시: 모든 필드 선택적
type UpdateUserDto = Partial<Omit<FullUser, 'id' | 'createdAt'>>;요약
Partial: 선택적 속성Required: 필수 속성Pick: 속성 선택Omit: 속성 제외Record: 객체 타입 정의Readonly: 읽기 전용ReturnType: 반환 타입 추출