Flatten 및 UnwrapPromise 유틸리티
중첩된 제네릭 구조의 포장을 푸는 형식을 작성합니다.
Flatten 및 UnwrapPromise 유틸리티은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
평탄화 문제
JavaScript 배열은 중첩될 수 있습니다. Flatten 유틸리티 타입은 타입에서 배열 래퍼를 재귀적으로 제거하여 가장 안쪽 요소 타입을 반환합니다.
type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type A = Flatten<number[][][]>; // number
type B = Flatten<string[]>; // string비재귀적 평탄화(한 수준)
단일 수준 평탄화는 Array.prototype.flat(1)을 반영하며, 중첩을 정확히 한 수준만 해제합니다.
type FlatOnce<T> = T extends (infer U)[] ? U : T;
type A = FlatOnce<number[][]>; // number[]
type B = FlatOnce<string[]>; // string재귀적 평탄화
재귀 버전은 더 이상 배열 래퍼가 남지 않을 때까지 재귀한다는 점에서 Array.prototype.flat(Infinity)을 모방합니다.
type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type C = Flatten<boolean[][][]>; // booleanUnwrapPromise: 한 수준
추론을 사용하여 단일 Promise 계층을 해제합니다.
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type D = UnwrapPromise<Promise<string>>; // string
type E = UnwrapPromise<number>; // number깊은 UnwrapPromise 해제
중첩된 프로미스를 재귀적으로 해제합니다. 기본 제공되는 Awaited와 같은 동작입니다.
type DeepUnwrap<T> = T extends Promise<infer U> ? DeepUnwrap<U> : T;
type F = DeepUnwrap<Promise<Promise<number>>>; // number평탄화와 UnwrapPromise 결합하기
결합된 타입은 프로미스와 배열을 모두 처리하므로 배열을 반환하는 비동기 함수에 유용합니다.
type Simplify<T> =
T extends Promise<infer U> ? Simplify<U>
: T extends (infer V)[] ? Simplify<V>
: T;
type G = Simplify<Promise<string[][]>>; // string기본 제공 대기 타입
TypeScript 4.5 이상에는 프로미스가 아닌 thenable을 포함하여 thenable 타입을 재귀적으로 해제하는 Awaited가 기본 제공됩니다.
type H = Awaited<Promise<Promise<string>>>; // string
// Also handles custom thenables with .then()맵 값 해제하기
동일한 추론 패턴으로 Map에서 값 타입을 추출합니다.
type MapValue<T> = T extends Map<any, infer V> ? V : never;
type I = MapValue<Map<string, number[]>>; // number[]FlattenObject: 중첩된 인터페이스 병합
타입 수준의 객체 평탄화 도구는 중첩된 객체 타입을 병합합니다. 더 복잡하지만 깊은 구성 병합에 유용합니다.
// This requires recursive mapped types + intersection spreading
// See the DeepPartial lesson for the base pattern실제 활용: API 응답 래퍼 해제
수동으로 타입을 단언하지 않고 중첩된 API 응답 래퍼를 해제하여 데이터 타입을 얻습니다.
type ApiData<T> = { data: T; status: number };
type ExtractData<T> = T extends ApiData<infer D> ? D : T;
type J = ExtractData<ApiData<User[]>>; // User[]요약: 평탄화 및 래퍼 해제
Flatten과 UnwrapPromise는 infer를 사용하는 재귀적 조건부 타입으로 타입 래퍼를 벗겨 냅니다. 프로미스 해제에는 Awaited를 사용하고 다른 구조에는 사용자 지정 재귀를 작성하십시오.
빠른 확인
Flatten은 무엇을 반환합니까?
학습 내용
Flatten과 UnwrapPromise는 제네릭 래퍼를 벗겨 내는 재귀적 조건부 타입입니다. 두 타입을 결합하여 복잡한 중첩 타입을 단순화하고, 프로미스 체인에는 기본 제공되는 Awaited를 사용하십시오.
자주 묻는 질문
“Flatten 및 UnwrapPromise 유틸리티” 강의는 무료인가요?
네 — “Flatten 및 UnwrapPromise 유틸리티” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Flatten 및 UnwrapPromise 유틸리티”에서 뭘 배우나요?
중첩된 제네릭 구조의 포장을 푸는 형식을 작성합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“Flatten 및 UnwrapPromise 유틸리티” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- DeepPartial 및 DeepReadonly
- Flatten 및 UnwrapPromise 유틸리티
- TupleToUnion 및 UnionToIntersection
- 형식 유틸리티 라이브러리 배포하기