0Pricing
Frontend Academy · 강의

유틸리티 타입: Partial, Required, Pick, Omit

내장 유틸리티 타입으로 기존 타입을 변환해 중복 없이 다양한 타입을 만듭니다.

유틸리티 타입: Partial, Required, Pick, Omit은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

내장 유틸리티 타입

TypeScript에는 다른 타입을 변환하는 제네릭 유틸리티 타입이 기본으로 제공됩니다. 이를 사용하면 비슷한 인터페이스 변형을 직접 다시 작성할 필요가 없습니다.

Partial<T>

T의 모든 속성을 선택 사항으로 만듭니다. 모든 필드를 제공할 필요가 없는 업데이트 또는 패치 데이터에 적합합니다.

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

function updateUser(id: string, changes: Partial<User>) {
  // changes.name is string | undefined
  // changes.email is string | undefined
}

updateUser('1', { name: 'Bob' }); // only update name

Required<T>

Partial의 반대입니다. 모든 속성을 필수로 만들고 선택 사항을 나타내는 (?) 수정자를 제거합니다.

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

function validate(config: Required<Config>) {
  // All three are now required
  console.log(config.host, config.port, config.debug);
}

Pick<T, K>

T에서 지정한 속성만 포함하는 타입을 생성합니다. 큰 객체에서 필요한 필드만 남기고 줄일 때 유용합니다.

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

type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to client

Omit<T, K>

지정한 속성을 제거한 타입을 생성합니다. Pick의 반대입니다.

type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }

type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yet

Readonly<T>

모든 속성을 읽기 전용으로 만들어 재할당을 방지합니다. 설정 객체와 변경할 수 없는 데이터에 유용합니다.

const config: Readonly<Config> = {
  host: 'localhost',
  port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-only

Record<K, V>

키가 K 타입이고 값이 V 타입인 객체 타입을 생성합니다. 키가 알려진 유니온일 때 원시 인덱스 시그니처보다 깔끔합니다.

type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;

const perms: Permissions = {
  admin:  { canEdit: true,  canDelete: true  },
  editor: { canEdit: true,  canDelete: false },
  viewer: { canEdit: false, canDelete: false },
};

ReturnType<T> 및 Parameters<T>

함수 타입의 반환 타입과 매개변수 타입을 추출합니다. 타입을 가져올 수 없지만 함수 시그니처를 일치시켜야 할 때 유용합니다.

function fetchUser(id: number) {
  return { id, name: 'Alice' };
}

type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]

Awaited<T>

Promise 타입을 해제하여 해결된 값의 타입을 얻습니다. 비동기 함수로 작업할 때 유용합니다.

type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise

async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }

Extract<T, U> 및 Exclude<T, U>

Extract<T, U>는 T에서 U에 할당할 수 있는 타입만 유지합니다. Exclude<T, U>는 해당 타입을 제거합니다.

type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>;       // 'a' | 'd'

// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // string

유틸리티 타입 조합하기

유틸리티 타입을 조합하여 정밀한 타입을 만들 수 있습니다.

type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional

function patch(id: string, data: UpdatePayload<User>) {
  // data can have any subset of mutable user fields
}

빠른 확인

인터페이스에서 지정한 키를 제거하는 유틸리티 타입은 무엇인가요?

복습: 유틸리티 타입

Partial은 모든 필드를 선택 사항으로 만듭니다. Required는 선택 사항 수정자를 제거합니다. Pick은 선택한 키를 유지합니다. Omit은 선택한 키를 제거합니다. Readonly는 변경을 방지합니다. Record는 유니온 키를 값 타입에 매핑합니다. ReturnType과 Parameters는 함수 타입을 추출합니다. 유틸리티 타입을 조합하여 정밀한 DTO 타입을 만드세요.

자주 묻는 질문

“유틸리티 타입: Partial, Required, Pick, Omit” 강의는 무료인가요?

네 — “유틸리티 타입: Partial, Required, Pick, Omit” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“유틸리티 타입: Partial, Required, Pick, Omit”에서 뭘 배우나요?

내장 유틸리티 타입으로 기존 타입을 변환해 중복 없이 다양한 타입을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“유틸리티 타입: Partial, Required, Pick, Omit” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 제네릭: T, extends, 제약 조건
  2. 유틸리티 타입: Partial, Required, Pick, Omit
  3. 매핑 타입과 조건부 타입
  4. 타입 좁히기: typeof, instanceof, 판별된 유니온
← Frontend Academy(으)로 돌아가기