0Pricing
Frontend Academy · 강의

매핑 타입과 조건부 타입

매핑 타입으로 타입의 모든 속성을 변환하고, infer와 함께 조건부 타입을 사용해 고급 타입 수준 로직을 구현합니다.

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

매핑된 타입 — 모든 속성 변환하기

매핑된 타입은 타입의 키를 순회하며 변환합니다. Partial, Readonly, Record 유틸리티 타입의 기반이 되는 기능입니다.

// Partial implemented as a mapped type:
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// Readonly:
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

as를 사용한 키 재매핑

매핑 절에서 as를 사용하면 키 이름을 다시 매핑할 수 있습니다. 템플릿 리터럴 타입과 조합하면 강력한 변환을 수행할 수 있습니다.

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }

never를 사용한 속성 필터링

키 재매핑에서 never를 반환하면 결과 타입에서 해당 속성을 제거할 수 있습니다.

// Keep only function-valued properties:
type FunctionProperties<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K];
};

조건부 타입 — 타입을 위한 if/else

조건부 타입은 T extends U ? TrueType : FalseType 패턴을 사용합니다. 런타임이 아니라 타입 수준에서 평가됩니다.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>;       // number

분배 조건부 타입

T가 유니온이면 조건부 타입은 각 구성원에 분배됩니다. string | number extends string ? ...는 각 타입을 별도로 확인하여 (string extends string ? ...) | (number extends string ? ...)로 처리합니다.

type ToArray<T> = T extends any ? T[] : never;

type StringOrNumberArray = ToArray<string | number>;
// string[] | number[]  (not (string | number)[])

infer를 사용해 타입 추출하기

infer R은 TypeScript가 채우는 타입 변수를 도입합니다. 이를 통해 타입 구조의 일부를 캡처할 수 있습니다.

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>;             // number

템플릿 리터럴 타입

템플릿 리터럴 타입은 템플릿 리터럴과 동일한 백틱 문법을 사용하지만 타입 수준에서 동작하며, 문자열 리터럴의 조합으로 유니온 타입을 생성합니다.

type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

매핑된 타입과 조건부 타입 조합하기

가장 강력한 TypeScript 패턴은 두 기능을 함께 사용합니다. 내장된 Required, Partial, Readonly, Record 타입은 모두 매핑된 타입입니다.

// Make all functions in an object async:
type Asyncify<T> = {
  [K in keyof T]: T[K] extends (...args: infer A) => infer R
    ? (...args: A) => Promise<R>
    : T[K];
};

DeepPartial — 재귀 유틸리티 타입

내장 Partial 타입은 한 단계까지만 적용됩니다. DeepPartial은 중첩된 객체 안으로 재귀적으로 적용됩니다.

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

실전 활용: API 응답 타입

매핑 타입과 조건부 타입을 사용하면 강력하게 API 타입을 파생할 수 있습니다. 예를 들어 객체에서 JSON으로 직렬화할 수 있는 속성만 추출할 수 있습니다.

과도한 설계 피하기

복잡한 타입 기법은 코드를 이해하기 어렵게 만들 수 있습니다. 항상 더 단순한 타입 별칭이나 인터페이스가 더 명확한지 고민해 보십시오. 타입은 TypeScript 숙련도를 보여 주는 것이 아니라 의도를 문서화해야 합니다.

빠른 확인

T가 유니온 타입일 때 T extends U ? A : B는 무엇으로 평가됩니까?

복습: 매핑 타입과 조건부 타입

매핑 타입은 [K in keyof T]로 키를 순회합니다. as를 사용하여 키를 다시 매핑할 수 있습니다. 필터링하려면 never를 반환합니다. 조건부 타입은 T extends U ? A : B 형식입니다. infer는 타입 변수를 추출합니다. 템플릿 리터럴 타입은 문자열 유니온을 만듭니다. 두 타입을 조합하면 DeepPartial이나 Asyncify 같은 강력한 타입 변환을 구현할 수 있습니다.

자주 묻는 질문

“매핑 타입과 조건부 타입” 강의는 무료인가요?

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

“매핑 타입과 조건부 타입”에서 뭘 배우나요?

매핑 타입으로 타입의 모든 속성을 변환하고, infer와 함께 조건부 타입을 사용해 고급 타입 수준 로직을 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“매핑 타입과 조건부 타입” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

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