ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Type-challenges] 난이도 Medium - (2)
    Front-End(Web)/Typescript 2023. 2. 14. 03:24
    반응형

    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. Promise.all
    2. Type Lookup
    3. Trim Left
    4. Trim
    5. Capitalize
    6. Replace
    7. ReplaceAll
    8. Append Argument

     

     

    📘 문제 및 풀이

     

    1. 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)
    const fn = (v: boolean) => v ? 1 : 2
    const fn1 = (v: boolean, w: any) => v ? 1 : 2
    
    
    /* _____________ 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[]>>>,
    ]

     

    🖌 풀이

    type MyAwaited<T> = T extends Promise<infer R> ? MyAwaited<R> : T
    
    declare function PromiseAll<T extends any[]>(
      values: readonly [...T]
    ): Promise<{
      [K in keyof T]: MyAwaited<T[K]>
    }>

    우선 MyAwaited 라는 커스텀 유틸리티를 만든다. 이는, Promise 값을 받으면 재귀적으로 반환타입을 반환한다.

     

    PromiseAll 유틸리티는, 먼저 배열을 제네릭 인자로 받고, 매개변수(values)는 그 배열을, 반환값은 매개변수들의 반환값을 Promise로 감싼 배열을 반환해야 한다.

    특히, 매개변수(values)를 사용할 때, 케이스 1,2와 같이 readonly인 경우가 있으므로 이를 추가해줘야 한다. 

     


    2. Type Lookup

    Sometimes, you may want to lookup for a type in a union to by their attributes.
    In this challenge, we would like to get the corresponding type by searching for the common type field in the union Cat | Dog. In other words, we will expect to get Dog for LookUp<Dog | Cat, 'dog'> and Cat for LookUp<Dog | Cat, 'cat'> in the following example.
    interface Cat {
      type: 'cat'
      breeds: 'Abyssinian' | 'Shorthair' | 'Curl' | 'Bengal'
    }
    
    
    /* _____________ Your Code Here _____________ */
    
    type LookUp<U, T> = U extends { type: T } ? U : never
    
    /* _____________ Test Cases _____________ */
    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

    유니온 타입에 extends로 체이닝할 수 있다. { type: T } 에 해당되면 U를, 아니면 never를 반환해서 필터링한다.

     


    3. Trim Left

    Implement TrimLeft<T> which takes an exact string type and returns a new string with the whitespace beginning removed.

    For example
    type trimed = TrimLeft<'  Hello World  '> // expected to be 'Hello World  '
    
    
    /* _____________ Test Cases _____________ */
    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 W = ' ' | '\n' | '\t'
    
    type TrimLeft<S extends string> = S extends `${W}${infer Rest}`
      ? TrimLeft<Rest>
      : S

    `${W}${infer Rest}` 처럼 문자열 타입을 template literal 형태로 접근 가능하다. (문서링크)

    왼쪽만 자르면 되므로, 이 부분이 W(공백)에 해당할 경우 TrimLeft를 재귀적으로 아니면 S 그대로를 반환한다.

     


    4. Trim

    Implement Trim<T> which takes an exact string type and returns a new string with the whitespace from both ends removed.

    For example
    type trimmed = Trim<'  Hello World  '> // expected to be 'Hello World'
    
    
    /* _____________ Test Cases _____________ */
    import type { Equal, Expect } from '@type-challenges/utils'
    
    type cases = [
      Expect<Equal<Trim<'str'>, 'str'>>,
      Expect<Equal<Trim<' str'>, 'str'>>,
      Expect<Equal<Trim<'     str'>, 'str'>>,
      Expect<Equal<Trim<'str   '>, 'str'>>,
      Expect<Equal<Trim<'     str     '>, 'str'>>,
      Expect<Equal<Trim<'   \n\t foo bar \t'>, 'foo bar'>>,
      Expect<Equal<Trim<''>, ''>>,
      Expect<Equal<Trim<' \n\t '>, ''>>,
    ]

     

    🖌 풀이

    type W = ' ' | '\n' | '\t'
    
    type Trim<S extends string> =
      S extends `${W}${infer T}` | `${infer T}${W}` ? Trim<T> : S

    위의 TrimLeft를 응용하면 된다. 좌우측 중 한 곳이 W(공백)이 있다면 Trim을 재귀적으로, 아니면 S 문자열 타입 그대로 반환한다.

     


    5. Capitalize

    Implement Capitalize<T> which converts the first letter of a string to uppercase and leave the rest as-is.

    For example
    type capitalized = Capitalize<'hello world'> // expected to be 'Hello world'
    
    
    /* _____________ Test Cases _____________ */
    import type { Equal, Expect } from '@type-challenges/utils'
    
    type cases = [
      Expect<Equal<MyCapitalize<'foobar'>, 'Foobar'>>,
      Expect<Equal<MyCapitalize<'FOOBAR'>, 'FOOBAR'>>,
      Expect<Equal<MyCapitalize<'foo bar'>, 'Foo bar'>>,
      Expect<Equal<MyCapitalize<''>, ''>>,
      Expect<Equal<MyCapitalize<'a'>, 'A'>>,
      Expect<Equal<MyCapitalize<'b'>, 'B'>>,
      Expect<Equal<MyCapitalize<'c'>, 'C'>>,
      Expect<Equal<MyCapitalize<'d'>, 'D'>>,
      Expect<Equal<MyCapitalize<'e'>, 'E'>>,
      Expect<Equal<MyCapitalize<'f'>, 'F'>>,
      Expect<Equal<MyCapitalize<'g'>, 'G'>>,
      Expect<Equal<MyCapitalize<'h'>, 'H'>>,
      Expect<Equal<MyCapitalize<'i'>, 'I'>>,
      Expect<Equal<MyCapitalize<'j'>, 'J'>>,
      Expect<Equal<MyCapitalize<'k'>, 'K'>>,
      Expect<Equal<MyCapitalize<'l'>, 'L'>>,
      Expect<Equal<MyCapitalize<'m'>, 'M'>>,
      Expect<Equal<MyCapitalize<'n'>, 'N'>>,
      Expect<Equal<MyCapitalize<'o'>, 'O'>>,
      Expect<Equal<MyCapitalize<'p'>, 'P'>>,
      Expect<Equal<MyCapitalize<'q'>, 'Q'>>,
      Expect<Equal<MyCapitalize<'r'>, 'R'>>,
      Expect<Equal<MyCapitalize<'s'>, 'S'>>,
      Expect<Equal<MyCapitalize<'t'>, 'T'>>,
      Expect<Equal<MyCapitalize<'u'>, 'U'>>,
      Expect<Equal<MyCapitalize<'v'>, 'V'>>,
      Expect<Equal<MyCapitalize<'w'>, 'W'>>,
      Expect<Equal<MyCapitalize<'x'>, 'X'>>,
      Expect<Equal<MyCapitalize<'y'>, 'Y'>>,
      Expect<Equal<MyCapitalize<'z'>, 'Z'>>,
    ]

     

    🖌 풀이

    type MyCapitalize<S extends string> = S extends `${infer F}${infer R}` ? `${Uppercase<F>}${R}` : ''

    Template Literal을 좀 더 응용해서 풀어보았다. 첫 번째 인자를 F라는 타입으로 추론하고, 여기에 Uppercase 유틸리티를 적용한다.

     


    6. Replace

    Implement Replace<S, From, To> which replace the string From with To once in the given string S

    For example
    type replaced = Replace<'types are fun!', 'fun', 'awesome'> // expected to be 'types are awesome!'
    
    
    /* _____________ Test Cases _____________ */
    import type { Equal, Expect } from '@type-challenges/utils'
    
    type cases = [
      Expect<Equal<Replace<'foobar', 'bar', 'foo'>, 'foofoo'>>,
      Expect<Equal<Replace<'foobarbar', 'bar', 'foo'>, 'foofoobar'>>,
      Expect<Equal<Replace<'foobarbar', '', 'foo'>, 'foobarbar'>>,
      Expect<Equal<Replace<'foobarbar', 'bar', ''>, 'foobar'>>,
      Expect<Equal<Replace<'foobarbar', 'bra', 'foo'>, 'foobarbar'>>,
      Expect<Equal<Replace<'', '', ''>, ''>>,
    ]

     

     

    🖌 풀이

    type Replace<
      S extends string,
      From extends string,
      To extends string,
    > = S extends `${infer Left}${From extends '' ? never : From}${infer Right}`
      ? `${Left}${To}${Right}`
      : S

    이와 같이, 가운데가 From인 경우엔 To로 변경된 타입을 반환하면 된다.

    케이스3처럼 From이 빈 배열인 경우가 있으므로, 예외처리를 한다.

     


    7. ReplaceAll

    Implement ReplaceAll<S, From, To> which replace the all the substring From with To in the given string S

    For example
    type replaced = ReplaceAll<'t y p e s', ' ', ''> // expected to be 'types'
    
    
    /* _____________ Test Cases _____________ */
    import type { Equal, Expect } from '@type-challenges/utils'
    
    type cases = [
      Expect<Equal<ReplaceAll<'foobar', 'bar', 'foo'>, 'foofoo'>>,
      Expect<Equal<ReplaceAll<'foobar', 'bag', 'foo'>, 'foobar'>>,
      Expect<Equal<ReplaceAll<'foobarbar', 'bar', 'foo'>, 'foofoofoo'>>,
      Expect<Equal<ReplaceAll<'t y p e s', ' ', ''>, 'types'>>,
      Expect<Equal<ReplaceAll<'foobarbar', '', 'foo'>, 'foobarbar'>>,
      Expect<Equal<ReplaceAll<'barfoo', 'bar', 'foo'>, 'foofoo'>>,
      Expect<Equal<ReplaceAll<'foobarfoobar', 'ob', 'b'>, 'fobarfobar'>>,
      Expect<Equal<ReplaceAll<'foboorfoboar', 'bo', 'b'>, 'foborfobar'>>,
      Expect<Equal<ReplaceAll<'', '', ''>, ''>>,
    ]

     

     

    🖌 풀이

    type ReplaceAll<
      S extends string,
      From extends string,
      To extends string,
    > = S extends `${infer Left}${From extends '' ? never : From}${infer Right}`
      ? `${Left}${To}${ReplaceAll<Right, From, To>}`
      : S

    위의 Replace를 응용하면 된다.

    마지막 케이스들처럼, 한 번 replace가 되면 다시 적용되지 않아야 하므로 Right에 대해서만 재귀적으로 실행시켜준다.

     


    8. Append Argument

    For given function type Fn, and any type A (any in this context means we don't restrict the type, and I don't have in mind any type 😉) create a generic type which will take Fn as the first argument, A as the second, and will produce function type G which will be the same as Fn but with appended argument A as a last one.

    For example,
    type Fn = (a: number, b: string) => number
    
    type Result = AppendArgument<Fn, boolean> 
    // expected be (a: number, b: string, x: boolean) => number
    
    
    /* _____________ Test Cases _____________ */
    import type { Equal, Expect } from '@type-challenges/utils'
    
    type Case1 = AppendArgument<(a: number, b: string) => number, boolean>
    type Result1 = (a: number, b: string, x: boolean) => number
    
    type Case2 = AppendArgument<() => void, undefined>
    type Result2 = (x: undefined) => void
    
    type cases = [
      Expect<Equal<Case1, Result1>>,
      Expect<Equal<Case2, Result2>>,
      // @ts-expect-error
      AppendArgument<unknown, undefined>,
    ]

     

     

    🖌 풀이

    
    type AppendArgument<Fn extends Function, A> = Fn extends (...args: infer Args) => infer Returns
      ? (...args: [...Args, A]) => Returns
      : never

    매개변수(Args), 반환값(Returns) 의 타입을 각각 단언해준다.

    AppendArgument 유틸리티가 반환하는 함수의 매개변수 타입에만, Args와 A로 연장시켜준다.

    반응형
Designed by Tistory.