[2026] TypeScript Utility Types | Partial, Pick, Omit, Record & Built-ins
이 글의 핵심
TypeScript utility types: Partial, Required, Readonly, Pick, Omit, Record, Exclude, Extract, ReturnType, Parameters—API DTOs, forms, and state patterns.
Introduction
Utility types are type transformation tools that TypeScript provides out of the box.
1. Partial
Concept
Makes every property optional. 아래 코드는 typescript를 사용한 구현 예제입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
interface User {
id: string;
name: string;
email: string;
age: number;
}
type PartialUser = Partial<User>;
// {
// id?: string;
// name?: string;
// email?: string;
// age?: number;
// }
Real-world example
아래 코드는 typescript를 사용한 구현 예제입니다. 함수를 통해 로직을 구현합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
function updateUser(id: string, updates: Partial<User>): User {
const user = getUser(id);
return { ...user, ...updates };
}
updateUser("U001", { name: "김철수" });
updateUser("U002", { email: "new@test.com", age: 30 });
How it works
type MyPartial<T> = {
[K in keyof T]?: T[K];
};
2. Required
Concept
Makes every property required. 아래 코드는 typescript를 사용한 구현 예제입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
interface User {
id: string;
name: string;
email?: string;
age?: number;
}
type RequiredUser = Required<User>;
// {
// id: string;
// name: string;
// email: string;
// age: number;
// }
How it works
type MyRequired<T> = {
[K in keyof T]-?: T[K];
};
3. Readonly
Concept
Makes every property read-only. 다음은 typescript를 활용한 상세한 구현 코드입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
interface User {
id: string;
name: string;
email: string;
}
type ReadonlyUser = Readonly<User>;
const user: ReadonlyUser = {
id: "U001",
name: "홍길동",
email: "hong@test.com"
};
// user.name = "김철수"; // ❌ Error
How it works
type MyReadonly<T> = {
readonly [K in keyof T]: T[K];
};
4. Pick<T, K>
Concept
Selects only certain properties. 다음은 typescript를 활용한 상세한 구현 코드입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
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: "홍길동"
};
Real-world example
type LoginForm = Pick<User, "email">;
type SignupForm = Pick<User, "name" | "email" | "age">;
How it works
type MyPick<T, K extends keyof T> = {
[P in K]: T[P];
};
5. Omit<T, K>
Concept
Removes specific properties. 다음은 typescript를 활용한 상세한 구현 코드입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
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: "hong@test.com"
};
Real-world example
type UserResponse = Omit<User, "password">;
type CreateUserRequest = Omit<User, "id">;
How it works
type MyOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
6. Record<K, T>
Concept
Builds an object type with fixed keys and a given value type. 아래 코드는 typescript를 사용한 구현 예제입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며. 코드를 직접 실행해보면서 동작을 확인해보세요.
type Role = "admin" | "user" | "guest";
type Permissions = Record<Role, string[]>;
const permissions: Permissions = {
admin: ["read", "write", "delete"],
user: ["read", "write"],
guest: [read]
};
Real-world example
다음은 typescript를 활용한 상세한 구현 코드입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며, 에러 처리를 통해 안정성을 확보합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
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: "さようなら" }
};
How it works
type MyRecord<K extends keyof any, T> = {
[P in K]: T;
};
7. Exclude<T, U>
Concept
Removes types from a union. 아래 코드는 typescript를 사용한 구현 예제입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며. 코드를 직접 실행해보면서 동작을 확인해보세요.
type AllRoles = "admin" | "user" | "guest" | "moderator";
type NonAdminRoles = Exclude<AllRoles, "admin">;
// "user" | "guest" | "moderator"
let role: NonAdminRoles = "user";
8. Extract<T, U>
Concept
Extracts only the members of a union that are assignable to U.
아래 코드는 typescript를 사용한 구현 예제입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며. 코드를 직접 실행해보면서 동작을 확인해보세요.
type AllRoles = "admin" | "user" | "guest" | "moderator";
type AdminRoles = Extract<AllRoles, "admin" | "moderator">;
// "admin" | "moderator"
let role: AdminRoles = "admin";
9. NonNullable
Concept
Removes null and undefined from a type. 아래 코드는 typescript를 사용한 구현 예제입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며. 코드를 직접 실행해보면서 동작을 확인해보세요.
type MaybeString = string | null | undefined;
type DefiniteString = NonNullable<MaybeString>;
// string
let value: DefiniteString = "hello";
10. ReturnType
Concept
Extracts a function’s return type. 아래 코드는 typescript를 사용한 구현 예제입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며, 함수를 통해 로직을 구현합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
function getUser() {
return {
id: "U001",
name: "홍길동",
email: "hong@test.com"
};
}
type User = ReturnType<typeof getUser>;
11. Parameters
Concept
Extracts a function’s parameter types as a tuple. 아래 코드는 typescript를 사용한 구현 예제입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며, 함수를 통해 로직을 구현합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
function createUser(name: string, age: number, email: string) {
return { name, age, email };
}
type CreateUserParams = Parameters<typeof createUser>;
// [string, number, string]
const params: CreateUserParams = ["홍길동", 25, "hong@test.com"];
createUser(...params);
12. Practical examples
Example 1: API typing
아래 코드는 typescript를 사용한 구현 예제입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
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">;
Example 2: Form state
다음은 typescript를 활용한 상세한 구현 코드입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며, 에러 처리를 통해 안정성을 확보합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
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 }
};
Example 3: App state slices
아래 코드는 typescript를 사용한 구현 예제입니다. 클래스를 정의하여 데이터와 기능을 캡슐화하며, 에러 처리를 통해 안정성을 확보합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
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">;
Summary
Takeaways
- Partial: all properties optional
- Required: all properties required
- Readonly: all properties read-only
- Pick: select properties
- Omit: remove properties
- Record: key–value object types
- Exclude / Extract: filter unions
- ReturnType: function return type
- Parameters: function parameter tuple type
Utility types at a glance
| Type | Use case | Example |
|---|---|---|
| Partial | Optional update payloads | PATCH bodies |
| Required | Ensure completeness | Validated records |
| Pick | Subsets | List rows, previews |
| Omit | Strip secrets | Responses without password |
| Record | Fixed key sets | Roles, error catalogs |