Front-End/TypeScript
[Type-challenges] 15, 16, 20, 62, 106
Y0ungZ
2024. 3. 8. 14:23
🍀 목차
15 - Last of Array
16 - Pop
20 - Promise.all
62 - Type Lookup
106 - Trim Left
15 - Last of Array
// 이 챌린지에는 TypeScript 4.0 사용이 권장됩니다.
// 배열 T를 사용하고 마지막 요소를 반환하는 제네릭 Last<T>를 구현합니다.
// 예시
type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]
type tail1 = Last<arr1> // expected to be 'c'
type tail2 = Last<arr2> // expected to be 1/* _____________ 여기에 코드 입력 _____________ */
type Last<T extends any[]> = any
/* _____________ 테스트 케이스 _____________ */
import type { Equal, Expect } from '@type-challenges/utils'
type cases = [
Expect<Equal<Last<[2]>, 2>>,
Expect<Equal<Last<[3, 2, 1]>, 1>>,
Expect<Equal<Last<[() => 123, { a: string }]>, { a: string }>>,
]type Last<T extends unknown[]> = T extends [...infer _, infer U] ? U : never;
감명 깊게 본 풀이는, 앞에 unknown(임의의 요소)을 추가하고 T의 length로 마지막 원소를 반환하는 방법이다.
type Last<T extends unknown[]> = [unknown, ...T][T['length']];
별개로 왜 4.0 사용이 권장되나 궁금해서 Documentation을 보니 4.0 이전 버전에서는 concat을 구현하기 위해 여러 개의 오버로드로 작성했다고 한다.
// 아래같은 무수한 오버로드를 "천 개의 오버로드로 인한 죽음"이라고 한다... 이름부터 무섭다.
function concat(arr1: [], arr2: []): [];
function concat<A>(arr1: [A], arr2: []): [A];
function concat<A, B>(arr1: [A, B], arr2: []): [A, B];
function concat<A, B, C>(arr1: [A, B, C], arr2: []): [A, B, C];
function concat<A, B, C, D>(arr1: [A, B, C, D], arr2: []): [A, B, C, D];
function concat<A, B, C, D, E>(arr1: [A, B, C, D, E], arr2: []): [A, B, C, D, E];
function concat<A, B, C, D, E, F>(arr1: [A, B, C, D, E, F], arr2: []): [A, B, C, D, E, F];)
// 포괄적인 케이스?
function concat<T, U>(arr1: T[], arr2: U[]): Array<T | U>;
튜플을 사용할 때 입력 길이, 요소 순서에 대한 어떤 것도 처리하지 않았다. 4.0 버전에서는 스프레드 연산자에서 제네릭 타입을 사용하여 작동하는 실제 타입을 모르더라도 튜플과 배열에 대한 고차함수를 표현할 수 있게 되었다.
function tail<T extends any[]>(arr: readonly [any, ...T]) {
const [_ignored, ...rest] = arr;
return rest;
}
const myTuple = [1, 2, 3, 4] as const;
const myArray = ["hello", "world"];
const r1 = tail(myTuple);
// ^ = const r1: [2, 3, 4]
const r2 = tail([...myTuple, ...myArray] as const);
// ^ = const r2: [2, 3, 4, ...string[]]
대략적으로 구조 분해 할당에 대한 타입 추론이 개선되고 더 많은 유형의 데이터를 다룰 수 있게 되었다고 이해했다.
16 - Pop
// 이 챌린지에는 TypeScript 4.0 사용이 권장됩니다.
// 배열 T를 사용해 마지막 요소를 제외한 배열을 반환하는 제네릭 Pop<T>를 구현합니다.
type arr1 = ['a', 'b', 'c', 'd']
type arr2 = [3, 2, 1]
type re1 = Pop<arr1> // expected to be ['a', 'b', 'c']
type re2 = Pop<arr2> // expected to be [3, 2]
// 더보기: 비슷하게 Shift, Push 그리고 Unshift도 구현할 수 있을까요?
/* _____________ 여기에 코드 입력 _____________ */
type Pop<T extends any[]> = any
/* _____________ 테스트 케이스 _____________ */
import type { Equal, Expect } from '@type-challenges/utils'
type cases = [
Expect<Equal<Pop<[3, 2, 1]>, [3, 2]>>,
Expect<Equal<Pop<['a', 'b', 'c', 'd']>, ['a', 'b', 'c']>>,
Expect<Equal<Pop<[]>, []>>,
]
type Pop<T extends unknown[]> = T extends [...infer U, unknown]? U : T;
type Shift<T extends unknown[]> = T extends [unknown, ...infer U]? U : T;
type Push<T extends unknown[], U>= [...T, U];
type Unshift<T extends unknown[], U>=[U, ...T];
20 - Promise.all
// Type the function PromiseAll that accepts an array of PromiseLike objects,
// the returning value should be Promise<T> where T is the resolved result array.
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise<string>((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
// expected to be `Promise<[number, 42, string]>`
const p = PromiseAll([promise1, promise2, promise3] as const)
/* _____________ Your Code Here _____________ */
declare function PromiseAll(values: any): any
/* _____________ Test Cases _____________ */
import type { Equal, Expect } from '@type-challenges/utils'
const promiseAllTest1 = PromiseAll([1, 2, 3] as const)
const promiseAllTest2 = PromiseAll([1, 2, Promise.resolve(3)] as const)
const promiseAllTest3 = PromiseAll([1, 2, Promise.resolve(3)])
const promiseAllTest4 = PromiseAll<Array<number | Promise<number>>>([1, 2, 3])
type cases = [
Expect<Equal<typeof promiseAllTest1, Promise<[1, 2, 3]>>>,
Expect<Equal<typeof promiseAllTest2, Promise<[1, 2, number]>>>,
Expect<Equal<typeof promiseAllTest3, Promise<[number, number, number]>>>,
Expect<Equal<typeof promiseAllTest4, Promise<number[]>>>,
]
// 유틸리티 타입 Awaited를 사용해도 된다.
type MyAwaited<T> = T extends Promise<infer U>? U : T;
declare function PromiseAll<T extends unknown[]>(values: readonly [...T]): Promise<{[key in keyof T]: MyAwaited<T[key]>}>;
62 - Type Lookup
// 때때로 유니온 타입의 특정 속성을 기준으로 조회할 수도 있습니다.
// 이 챌린지에서는 유니온 타입 Cat | Dog에서 공통으로 사용하는
// type 필드를 기준으로 해당하는 타입을 얻고자 합니다.
// 다시 말해서, 다음 예시에서는 LookUp<Cat | Dog, 'dog'>으로 Dog 타입을,
// LookUp<Cat | Dog, 'cat'>으로 Cat 타입을 얻을 수 있습니다.
// 예시
interface Cat {
type: 'cat'
breeds: 'Abyssinian' | 'Shorthair' | 'Curl' | 'Bengal'
}
interface Dog {
type: 'dog'
breeds: 'Hound' | 'Brittany' | 'Bulldog' | 'Boxer'
color: 'brown' | 'white' | 'black'
}
type MyDogType = LookUp<Cat | Dog, 'dog'> // 기대되는 결과는 `Dog`입니다.
/* _____________ 여기에 코드 입력 _____________ */
type LookUp<U, T> = any
/* _____________ 테스트 케이스 _____________ */
import type { Equal, Expect } from '@type-challenges/utils'
interface Cat {
type: 'cat'
breeds: 'Abyssinian' | 'Shorthair' | 'Curl' | 'Bengal'
}
interface Dog {
type: 'dog'
breeds: 'Hound' | 'Brittany' | 'Bulldog' | 'Boxer'
color: 'brown' | 'white' | 'black'
}
type Animal = Cat | Dog
type cases = [
Expect<Equal<LookUp<Animal, 'dog'>, Dog>>,
Expect<Equal<LookUp<Animal, 'cat'>, Cat>>,
]
type LookUp<U, T> = U extends {type: T} ? U : never;
Mapped type으로 작성하다 막혀서 참고했다.
106 - Trim Left
// 정확한 문자열 타입이고 시작 부분의 공백이 제거된 새 문자열을 반환하는 TrimLeft<T>를 구현하십시오.
// 예시
type trimed = TrimLeft<' Hello World '> // 기대되는 결과는 'Hello World '입니다.
/* _____________ 여기에 코드 입력 _____________ */
type TrimLeft<S extends string> = any
/* _____________ 테스트 케이스 _____________ */
import type { Equal, Expect } from '@type-challenges/utils'
type cases = [
Expect<Equal<TrimLeft<'str'>, 'str'>>,
Expect<Equal<TrimLeft<' str'>, 'str'>>,
Expect<Equal<TrimLeft<' str'>, 'str'>>,
Expect<Equal<TrimLeft<' str '>, 'str '>>,
Expect<Equal<TrimLeft<' \n\t foo bar '>, 'foo bar '>>,
Expect<Equal<TrimLeft<''>, ''>>,
Expect<Equal<TrimLeft<' \n\t'>, ''>>,
]type TrimLeft<S extends string> = S extends `${infer L}${infer R}` ? L extends ' ' | '\n' | '\t' ? TrimLeft<R> : S : S;
후에 답안들을 보며 더 간단하게 고쳤다.
type Space = ' ' | '\n' | '\t';
type TrimLeft<S extends string> = S extends `${Space}${infer R}` ? TrimLeft<R> : S;
참고자료
https://github.com/type-challenges/type-challenges/blob/main/questions/00016-medium-pop/README.ko.md