-
[Type-challenges] 난이도 Medium - (10)Front-End(Web)/Typescript 2023. 2. 28. 19:13반응형
Github 챌린지 문제들을 풀고 관련된 내용을 정리하면서, 부족했던 타입스크립트 기본지식을 다지고자 한다. (주 1-2회)
https://github.com/type-challenges/type-challenges
📘 목차 - Medium
- Construct Tuple
- Number Range
- Combination
- Subsequence
- FirstUniqueCharIndex
📘 문제 및 풀이
1. Construct Tuple
Construct a tuple with a given length.
For exampletype result = ConstructTuple<2> // expect to be [unknown, unkonwn]
/* _____________ Test Cases _____________ */ import type { Equal, Expect } from '@type-challenges/utils' type cases = [ Expect<Equal<ConstructTuple<0>, []>>, Expect<Equal<ConstructTuple<2>, [unknown, unknown]>>, Expect<Equal<ConstructTuple<999>['length'], 999>>, // @ts-expect-error Expect<Equal<ConstructTuple<1000>['length'], 1000>>, ]
🖌 풀이
type ConstructTuple<L extends number, A extends unknown[] = []> = L extends A['length'] ? A : ConstructTuple<L, [...A, unknown]>
제너릭 인자에 배열을 저장하여 그 길이를 L과 비교하면 쉽게 풀 수 있다.
2. Number Range
Sometimes we want to limit the range of numbers... For examples.
type result = NumberRange<2 , 9> // | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
/* _____________ Test Cases _____________ */ import type { Equal, Expect } from '@type-challenges/utils' type Result1 = | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 type Result2 = | 0 | 1 | 2 type Result3 = | 0 | 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 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 type cases = [ Expect<Equal<NumberRange<2, 9>, Result1>>, Expect<Equal<NumberRange<0, 2>, Result2>>, Expect<Equal<NumberRange<0, 140>, Result3>>, ]
🖌 풀이
type AddOn<M, R extends unknown[] = []> = R['length'] extends M ? [...R, 1]['length'] : AddOn<M, [...R, 1]>; type NumberRange<L, H, A extends unknown[] = []> = L extends H ? [...A, L][number] : NumberRange<AddOn<L>, H, [...A, L]>;
좋은 풀이를 가져와봤다. AddOn은 현재 숫자의 +1을 반환하는 유틸리티다.
위 유틸리티로 L을 1씩 올리면서 이 L값을 A배열에 누적하면서 NumberRange 유틸리티를 재귀하는 것이다.
3. Combination
Given an array of strings, do Permutation & Combination. It's also useful for the prop types like video
controlsList// expected to be `"foo" | "bar" | "baz" | "foo bar" | "foo bar baz" | "foo baz" | "foo baz bar" | "bar foo" | "bar foo baz" | "bar baz" | "bar baz foo" | "baz foo" | "baz foo bar" | "baz bar" | "baz bar foo"` type Keys = Combination<['foo', 'bar', 'baz']>
/* _____________ Test Cases _____________ */ import type { Equal, Expect } from '@type-challenges/utils' type cases = [ Expect<Equal<Combination<['foo', 'bar', 'baz']>, 'foo' | 'bar' | 'baz' | 'foo bar' | 'foo bar baz' | 'foo baz' | 'foo baz bar' | 'bar foo' | 'bar foo baz' | 'bar baz' | 'bar baz foo' | 'baz foo' | 'baz foo bar' | 'baz bar' | 'baz bar foo'>>, ]
🖌 풀이
type Combination<T extends string[], A = T[number], U = A> = U extends infer I extends string ? I | `${I} ${Combination<[], Exclude<A, I>>}` :never
이전의 AllCombination(문자열 조합) 문제와 유사할 줄 알았으나 사뭇 달랐다.
A(T 인자들의 유니온 타입), U(A를 복사한 타입) 두 가지를 추가인자로 두고, U의 각 유니온 타입값에 대해 Combination을 재귀적으로 돌려준다. 이 때, 두 번째 인자로 원본 A에서 I를 제외한 배열을 넘겨준다.
4. Subsequence
Given an array of unique elements, return all possible subsequences.
A subsequence is a sequence that can be derived from an array by deleting some or no elements without changing the order of the remaining elements.
For example:type A = Subsequence<[1, 2]> // [] | [1] | [2] | [1, 2]
/* _____________ Test Cases _____________ */ import type { Equal, Expect } from '@type-challenges/utils' type cases = [ Expect<Equal<Subsequence<[1, 2]>, [] | [1] | [2] | [1, 2]>>, Expect<Equal<Subsequence<[1, 2, 3]>, [] | [1] | [2] | [1, 2] | [3] | [1, 3] | [2, 3] | [1, 2, 3] >>, ]
🖌 풀이
type Subsequence<T extends any[]> = T extends [infer F, ...infer R] ? ([F] | [F, ...Subsequence<R>] | Subsequence<R>) : T;
Subsequence 유틸리티를 재귀적으로 실행해준다.
F만 있는 경우, F와 나머지를 같이 포함한 경우, 나머지만 있는 경우 3가지가 유니온된다.
5. FirstUniqueCharIndex
Given a string s, find the first non-repeating character in it and return its index. If it does not exist, return -1.
Only test cases.
/* _____________ Test Cases _____________ */ import type { Equal, Expect } from '@type-challenges/utils' type cases = [ Expect<Equal<FirstUniqueCharIndex<'leetcode'>, 0>>, Expect<Equal<FirstUniqueCharIndex<'loveleetcode'>, 2>>, Expect<Equal<FirstUniqueCharIndex<'aabb'>, -1>>, Expect<Equal<FirstUniqueCharIndex<''>, -1>>, ]
🖌 풀이
type FirstUniqueCharIndex<T extends string, L extends string = '', I extends 0[] = []> = T extends `${infer F}${infer R}` ? `${L}${R}` extends `${string}${F}${string}` ? FirstUniqueCharIndex<R,`${L}${F}`,[...I,0]> :I['length'] : -1
제네릭 인자로, L(이전 문자), I(인덱스를 계산하기 위한 배열) 2가지를 추가적으로 설정했다.
먼저 T가 문자열일 때, L(이전 문자)과 R(현재 문자를 제외한 나머지 문자) 을 조합하고, 여기에 F(현재문자) 좌우에 string으로 확장한 문자열에 해당되는지를 확인한다.
이에 해당된다면, F는 고유문자가 아니기 때문에, 남은 R문자, 기존 L에 F를 더한 이전문자, 인덱스 배열에 한 개 인자를 추가하여 재귀한다.
아니라면, 지금 F는 고유문자이므로 그 인덱스 값을 I배열의 길이로 반환한다. 마지막까지 찾지 못하면 -1을 반환한다.
반응형'Front-End(Web) > Typescript' 카테고리의 다른 글
[Type-challenges] 난이도 Hard - (1) (0) 2023.03.25 [Type-challenges] 난이도 Medium - (11) (0) 2023.03.03 [Type-challenges] 난이도 Medium - (9) (2) 2023.02.28 [Type-challenges] 난이도 Medium - (8) (0) 2023.02.28 [Type-challenges] 난이도 Medium - (7) (0) 2023.02.27