TypeScript 유틸리티 타입 | Partial, Pick, Omit, Record
이 글의 핵심
TypeScript 유틸리티 타입에 대해 정리한 개발 블로그 글입니다. interface User { id: string; name: string; email: string; age: number; }
들어가며
유틸리티 타입은 이미 정의한 타입에서 일부만 골라 내거나, 모두 선택적으로 바꾸는 등 변환을 한 번에 해 주는 도구입니다. 같은 명찰을 여러 형태로 찍어 쓰는 느낌에 가깝습니다.
1. Partial
개념
모든 프로퍼티를 선택적(optional)으로 만듭니다.
interface User {
id: string;
name: string;
email: string;
age: number;
}
type PartialUser = Partial<User>;
// {
// id?: string;
// name?: string;
// email?: string;
// age?: number;
// }실전 예제
function updateUser(id: string, updates: Partial<User>): User {
const user = getUser(id);
return { ...user, ...updates };
}
updateUser("U001", { name: "김철수" });
updateUser("U002", { email: "[email protected]", age: 30 });구현 원리
type MyPartial<T> = {
[K in keyof T]?: T[K];
};2. Required
개념
모든 프로퍼티를 필수(required)로 만듭니다.
interface User {
id: string;
name: string;
email?: string;
age?: number;
}
type RequiredUser = Required<User>;
// {
// id: string;
// name: string;
// email: string;
// age: number;
// }구현 원리
type MyRequired<T> = {
[K in keyof T]-?: T[K];
};3. Readonly
개념
모든 프로퍼티를 읽기 전용으로 만듭니다.
interface User {
id: string;
name: string;
email: string;
}
type ReadonlyUser = Readonly<User>;
const user: ReadonlyUser = {
id: "U001",
name: "홍길동",
email: "[email protected]"
};
// user.name = "김철수"; // ❌ 에러구현 원리
type MyReadonly<T> = {
readonly [K in keyof T]: T[K];
};4. Pick<T, K>
개념
특정 프로퍼티만 선택합니다.
interface User {
id: string;
name: string;
email: string;
age: number;
address: string;
}
type UserPreview = Pick<User, "id" | "name">;
// {
// id: string;
// name: string;
// }
const preview: UserPreview = {
id: "U001",
name: "홍길동"
};실전 예제
type LoginForm = Pick<User, "email">;
type SignupForm = Pick<User, "name" | "email" | "age">;구현 원리
type MyPick<T, K extends keyof T> = {
[P in K]: T[P];
};5. Omit<T, K>
개념
특정 프로퍼티를 제외합니다.
interface User {
id: string;
name: string;
email: string;
password: string;
}
type UserWithoutPassword = Omit<User, "password">;
// {
// id: string;
// name: string;
// email: string;
// }
const user: UserWithoutPassword = {
id: "U001",
name: "홍길동",
email: "[email protected]"
};실전 예제
type UserResponse = Omit<User, "password">;
type CreateUserRequest = Omit<User, "id">;구현 원리
type MyOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;6. 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"]
};실전 예제
type ErrorCode = "NOT_FOUND" | "UNAUTHORIZED" | "SERVER_ERROR";
type ErrorMessages = Record<ErrorCode, string>;
const errors: ErrorMessages = {
NOT_FOUND: "리소스를 찾을 수 없습니다",
UNAUTHORIZED: "인증이 필요합니다",
SERVER_ERROR: "서버 에러가 발생했습니다"
};
type Language = "ko" | "en" | "ja";
type Translations = Record<Language, Record<string, string>>;
const translations: Translations = {
ko: { greeting: "안녕하세요", goodbye: "안녕히 가세요" },
en: { greeting: "Hello", goodbye: "Goodbye" },
ja: { greeting: "こんにちは", goodbye: "さようなら" }
};구현 원리
type MyRecord<K extends keyof any, T> = {
[P in K]: T;
};7. Exclude<T, U>
개념
Union 타입에서 특정 타입을 제외합니다.
type AllRoles = "admin" | "user" | "guest" | "moderator";
type NonAdminRoles = Exclude<AllRoles, "admin">;
// "user" | "guest" | "moderator"
let role: NonAdminRoles = "user";8. Extract<T, U>
개념
Union 타입에서 특정 타입만 추출합니다.
type AllRoles = "admin" | "user" | "guest" | "moderator";
type AdminRoles = Extract<AllRoles, "admin" | "moderator">;
// "admin" | "moderator"
let role: AdminRoles = "admin";9. NonNullable
개념
null과 undefined를 제거합니다.
type MaybeString = string | null | undefined;
type DefiniteString = NonNullable<MaybeString>;
// string
let value: DefiniteString = "hello";10. ReturnType
개념
함수의 반환 타입을 추출합니다.
function getUser() {
return {
id: "U001",
name: "홍길동",
email: "[email protected]"
};
}
type User = ReturnType<typeof getUser>;11. Parameters
개념
함수의 매개변수 타입을 튜플로 추출합니다.
function createUser(name: string, age: number, email: string) {
return { name, age, email };
}
type CreateUserParams = Parameters<typeof createUser>;
// [string, number, string]
const params: CreateUserParams = ["홍길동", 25, "[email protected]"];
createUser(...params);12. 실전 예제
예제 1: API 타입 관리
interface User {
id: string;
name: string;
email: string;
password: string;
createdAt: Date;
updatedAt: Date;
}
type CreateUserRequest = Omit<User, "id" | "createdAt" | "updatedAt">;
type UpdateUserRequest = Partial<Omit<User, "id" | "createdAt" | "updatedAt">>;
type UserResponse = Omit<User, "password">;
type UserListItem = Pick<User, "id" | "name" | "email">;예제 2: 폼 상태 관리
interface FormField<T> {
value: T;
error: string | null;
touched: boolean;
}
type FormState<T> = {
[K in keyof T]: FormField<T[K]>;
};
interface LoginData {
email: string;
password: string;
}
type LoginFormState = FormState<LoginData>;
const form: LoginFormState = {
email: { value: "", error: null, touched: false },
password: { value: "", error: null, touched: false }
};예제 3: 상태 관리
interface AppState {
user: User | null;
posts: Post[];
loading: boolean;
error: string | null;
}
type LoadingState = Pick<AppState, "loading">;
type ErrorState = Pick<AppState, "error">;
type DataState = Omit<AppState, "loading" | "error">;정리
핵심 요약
- Partial: 모든 프로퍼티 선택적
- Required: 모든 프로퍼티 필수
- Readonly: 모든 프로퍼티 읽기 전용
- Pick: 특정 프로퍼티 선택
- Omit: 특정 프로퍼티 제외
- Record: 키-값 객체 타입
- Exclude/Extract: Union 타입 필터링
- ReturnType: 함수 반환 타입
- Parameters: 함수 매개변수 타입
유틸리티 타입 비교
| 타입 | 용도 | 예시 |
|---|---|---|
| Partial | 선택적 변환 | 업데이트 |
| Required | 필수 변환 | 완전한 데이터 |
| Pick | 선택 | 일부 필드 |
| Omit | 제외 | 비밀번호 제외 |
| Record | 객체 생성 | 권한, 에러 메시지 |
다음 단계
- TypeScript 데코레이터
- TypeScript 고급 패턴
- TypeScript 실전 프로젝트
관련 글
- TypeScript 시작하기 | 설치, 설정, 기본 문법
- TypeScript 고급 타입 | Union, Intersection, Literal 타입
- TypeScript 인터페이스 | Interface 완벽 가이드
- TypeScript 제네릭 | Generics 완벽 가이드
- TypeScript 데코레이터 | Decorators 완벽 가이드