Front-End(Web)/Typescript

[Type-challenges] 난이도 Medium - (10)

ttaeng_99 2023. 2. 28. 19:13
반응형

Github 챌린지 문제들을 풀고 관련된 내용을 정리하면서, 부족했던 타입스크립트 기본지식을 다지고자 한다. (주 1-2회)

 

https://github.com/type-challenges/type-challenges

 

GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge

Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge

github.com

 

📘 목차 - Medium

  1. Construct Tuple
  2. Number Range
  3. Combination
  4. Subsequence
  5. FirstUniqueCharIndex

 

 

📘 문제 및 풀이

 

1. Construct Tuple

Construct a tuple with a given length.

For example
type 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을 반환한다. 

반응형