소개
TypeScript에서 깊게 중첩된 데이터 구조로 작업할 때 이러한 구조를 변환하는 유틸리티 유형을 만드는 것은 일반적인 작업입니다. 그러나 재귀 유형은 강력하기는 하지만 나름의 과제도 가지고 있습니다.
그러한 과제 중 하나는 유형 계산이 TypeScript의 기능을 초과하지 않도록 재귀 깊이를 효과적으로 제어하는 것입니다. 이 기사에서는 유형 수준 숫자를 증가 및 감소시키는 일반적인 접근 방식을 살펴보고, 그 한계를 식별하고, 적절한 Increment 및 Decrement 유형을 사용하여 재귀 깊이를 관리하기 위한 강력한 솔루션을 제시합니다.
? 기본 유형 수준 숫자 연산의 문제
제한 사항을 더 잘 이해하기 위해 유형 수준에서 숫자를 늘리거나 줄일 때 자주 사용되는 순진한 접근 방식을 살펴보겠습니다.
1 2 3 4 5 | type Prev = [never, 0, 1, 2, 3, 4];
type Next = [1, 2, 3, 4, 5, 6];
type MinusOne = Prev[5];
type PlusOne = Next[5];
|
로그인 후 복사
로그인 후 복사
? 문제 시나리오: 깊게 중첩된 선택적 속성
깊이 중첩된 개체 유형이 있고 모든 개체 유형을 만들고 싶다고 가정합니다.
지정된 수준까지 선택적인 속성:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | type DeepObject = {
a: number;
b: {
c: string;
d: {
e: boolean;
f: {
g: string;
h: {
i: number;
j: {
k: string;
};
};
};
};
};
};
|
로그인 후 복사
로그인 후 복사
순진하고 하드코딩된 접근 방식을 사용하면 속성이 선택 사항이 되는 깊이를 관리하는 방법은 다음과 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 | type Prev = [never, 0, 1, 2, 3, 4];
type DeepOptional<
T,
Limit extends number = 1
> = Limit extends never
? never
: {
[K in keyof T]?: T[K] extends object
? DeepOptional<T[K], Prev[Limit]>
: T[K];
};
|
로그인 후 복사
로그인 후 복사
설명:
-
DeepOptional은 속성을 Limit까지 선택적으로 만듭니다.
- Limit은 정적 튜플에서 감소된 값을 가져오는 데 사용됩니다.
사용 예:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | type NewDeepObject = DeepOptional<DeepObject, 3>;
type NewDeepObject = DeepOptional<DeepObject, 1>;
|
로그인 후 복사
로그인 후 복사
✋ 이 접근 방식의 문제
-
제한된 범위: 이 접근 방식은 사전 정의된 Prev 및 Next 배열만큼만 유연합니다. 이러한 배열의 길이를 초과하여 숫자를 늘리거나 줄여야 하는 경우 수동으로 확장해야 하며 이는 번거롭고 오류가 발생하기 쉽습니다.
-
확장성: 요구 사항이 발전함에 따라 이러한 어레이 관리가 점점 더 복잡해지며 대규모 유형 작업에는 이 접근 방식이 실용적이지 않습니다.
? 더욱 강력한 솔루션: 튜플 기반 증가 및 감소 유형
미리 정의된 배열의 한계를 극복하기 위해 튜플 조작을 사용하여 동적으로 확장되는 유형이 안전한 증가 및 감소 연산을 생성할 수 있습니다.
?️ 주요 빌딩 블록
-
길이 유틸리티: 튜플의 길이를 가져오는 유형:
1 2 3 4 5 | type Prev = [never, 0, 1, 2, 3, 4];
type Next = [1, 2, 3, 4, 5, 6];
type MinusOne = Prev[5];
type PlusOne = Next[5];
|
로그인 후 복사
로그인 후 복사
-
TupleOf: N 요소의 튜플을 생성하는 유형:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | type DeepObject = {
a: number;
b: {
c: string;
d: {
e: boolean;
f: {
g: string;
h: {
i: number;
j: {
k: string;
};
};
};
};
};
};
|
로그인 후 복사
로그인 후 복사
-
팝 유틸리티: 튜플의 마지막 요소를 제거하는 유형:
1 2 3 4 5 6 7 8 9 10 11 12 | type Prev = [never, 0, 1, 2, 3, 4];
type DeepOptional<
T,
Limit extends number = 1
> = Limit extends never
? never
: {
[K in keyof T]?: T[K] extends object
? DeepOptional<T[K], Prev[Limit]>
: T[K];
};
|
로그인 후 복사
로그인 후 복사
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | type NewDeepObject = DeepOptional<DeepObject, 3>;
type NewDeepObject = DeepOptional<DeepObject, 1>;
|
로그인 후 복사
로그인 후 복사
? 증가 및 감소 적용: 실제 예
이러한 유틸리티 유형을 보다 복잡한 실제 문제에 어떻게 적용할 수 있는지 살펴보겠습니다. 즉, 객체의 속성을 특정 깊이까지 선택적으로 만드는 것입니다.
문제 시나리오: 깊게 중첩된 선택적 속성
깊이 중첩된 개체 유형이 있고 모든 개체 유형을 만들고 싶다고 가정합니다.
지정된 수준까지 선택적인 속성:
1 | type Length<T extends any[]> = (T extends { length: number } ? T["length"] : never) & number;
|
로그인 후 복사
순진하고 하드코딩된 접근 방식을 사용하면 속성이 선택 사항이 되는 깊이를 관리하는 것이 복잡해집니다. 유형이 안전한 DeepOptional 유틸리티가 이 문제를 해결하는 방법은 다음과 같습니다.
DeepOptional 구현
1 2 3 | type TupleOf<N extends number, T extends unknown[] = []> = Length<T> extends N
? T
: TupleOf<N, [...T, unknown]>;
|
로그인 후 복사
설명:
-
DeepOptional은 속성을 Limit까지 선택적으로 만듭니다.
- 이 유형은 Limit과 일치할 때까지 CurrentLevel을 재귀적으로 증가시키고, 이 시점에서 반복을 멈추고 T를 반환합니다.
- 증분 수동 배열 매핑 없이 유형이 안전한 재귀를 보장합니다.
사용 예:
1 | type Pop<T extends any[]> = T extends [...infer U, unknown] ? U : never;
|
로그인 후 복사
?️ 결론
medusajs에서는 복잡한 기술 문제를 극복할 수 있는 가장 효율적이고 혁신적인 솔루션을 찾기 위해 최선을 다하고 있습니다. 튜플 기반 증가 및 감소 유형을 활용하면 기본 유형 수준 작업의 한계를 넘어 확장 가능하고 유형이 안전한 유틸리티를 만들 수 있습니다. 이 방법은 재귀 깊이 관리를 단순화할 뿐만 아니라 TypeScript의 유형 검사 제한을 초과하지 않고 복잡한 유형 작업에 필요한 유연성을 유지하도록 보장합니다.
위 내용은 TypeScript의 재귀 유형 익히기: 깊이 제한을 적절하게 처리하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
