[Type-challenges] 3, 8, 9, 10, 12

Front-End/TypeScript 2024. 3. 2. 09:51

🍀 목차
3 - Omit
8 - Readonly 2
9 - Deep Readonly
10 - Tuple to Union
12 - Chainable Options

3 - Omit

// T에서 K 프로퍼티만 제거해 새로운 오브젝트 타입을 만드는 
// 내장 제네릭 Omit<T, K>를 이를 사용하지 않고 구현하세요.

// 예시
interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyOmit<Todo, 'description' | 'title'>

const todo: TodoPreview = {
  completed: false,
}

/* _____________ 여기에 코드 입력 _____________ */

type MyOmit<T, K> = any

/* _____________ 테스트 케이스 _____________ */
import type { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<Expected1, MyOmit<Todo, 'description'>>>,
  Expect<Equal<Expected2, MyOmit<Todo, 'description' | 'completed'>>>,
]

// @ts-expect-error
type error = MyOmit<Todo, 'description' | 'invalid'>

interface Todo {
  title: string
  description: string
  completed: boolean
}

interface Expected1 {
  title: string
  completed: boolean
}

interface Expected2 {
  title: string
}

Exclude를 사용한 풀이

type MyOmit<T, K extends keyof T> = {
  [key in Exclude<keyof T, K>]: T[key];
}

Exclude<T, U>는 T extends U ? never : T이며, T에오는 U를 제외하겠다는 뜻이 된다.

Exclude를 사용하지 않은 풀이

type MyOmit<T, K extends keyof T> ={
  [key in keyof T as key extends K ? never : key] : T[key];
}

Mapped Types와 Conditional Types를 사용한다. TypeScript 4.1 이상에서는 as를 통해 매핑된 타입의 키를 다시 매핑할 수 있다.

8 - Readonly 2

// T에서 K 프로퍼티만 읽기 전용으로 설정해 
// 새로운 오브젝트 타입을 만드는 제네릭 MyReadonly2<T, K>를 구현하세요. 
// K가 주어지지 않으면 단순히 Readonly<T>처럼 모든 프로퍼티를 읽기 전용으로 설정해야 합니다.

// 예시
interface Todo {
  title: string
  description: string
  completed: boolean
}

const todo: MyReadonly2<Todo, 'title' | 'description'> = {
  title: "Hey",
  description: "foobar",
  completed: false,
}

todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property
todo.completed = true // OK

/* _____________ 여기에 코드 입력 _____________ */

type MyReadonly2<T, K> = any

/* _____________ 테스트 케이스 _____________ */
import type { Alike, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Alike<MyReadonly2<Todo1>, Readonly<Todo1>>>,
  Expect<Alike<MyReadonly2<Todo1, 'title' | 'description'>, Expected>>,
  Expect<Alike<MyReadonly2<Todo2, 'title' | 'description'>, Expected>>,
  Expect<Alike<MyReadonly2<Todo2, 'description' >, Expected>>,
]

// @ts-expect-error
type error = MyReadonly2<Todo1, 'title' | 'invalid'>

interface Todo1 {
  title: string
  description?: string
  completed: boolean
}

interface Todo2 {
  readonly title: string
  description?: string
  completed: boolean
}

interface Expected {
  readonly title: string
  readonly description?: string
  completed: boolean
}

K가 주어지지 않으면 모든 프로퍼티를 읽기 전용으로 설정해야 하는 점을 유의해야 한다. 이 부분에서 막혀서 정답을 보고 공부하였다.

type MyReadonly2<T, K extends keyof T = keyof T> = {
  [key in keyof T as key extends K? never : key] : T[key]
} & {
  readonly [key in K] : T[key]
}

우선 바로 위(3번) 문제였던 MyOmit을 재사용(유틸리티 타입 Omit이나 Pick을 사용해도 된다)하여 key가 K에 해당하는 프로퍼티라면 제외시킨다. 그렇지 않으면 key로 해당 프로퍼티를 포함시킨다.

이렇게 하면 T에서 K 프로퍼티만 제외하여 새로운 오브젝트가 만들어지는데, 이를 readonly [key in K] : T[key]와 &(Intersection)한다. 그렇게 K 프로퍼티만 readonly 시킨 결과가 나온다.

K가 없을 때를 위해 K를 추가로 keyof T로 설정한다. K가 명시되지 않으면 default parameter로 T의 프로퍼티를 주는 것이다.

9 - Deep Readonly

// 객체의 프로퍼티와 모든 하위 객체를 재귀적으로 읽기 전용으로 설정하는 
// 제네릭 DeepReadonly<T>를 구현하세요.

// * 이 챌린지에서는 타입 파라미터 T를 객체 타입으로 제한하고 있습니다. 
// 객체뿐만 아니라 배열, 함수, 클래스 등 가능한 다양한 형태의 타입 파라미터를 사용하도록 도전해 보세요.

type X = { 
  x: { 
    a: 1
    b: 'hi'
  }
  y: 'hey'
}

type Expected = { 
  readonly x: { 
    readonly a: 1
    readonly b: 'hi'
  }
  readonly y: 'hey' 
}

type Todo = DeepReadonly<X> // should be same as `Expected`

/* _____________ 여기에 코드 입력 _____________ */

type DeepReadonly<T> = any

/* _____________ 테스트 케이스 _____________ */
import type { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<DeepReadonly<X1>, Expected1>>,
  Expect<Equal<DeepReadonly<X2>, Expected2>>,
]

type X1 = {
  a: () => 22
  b: string
  c: {
    d: boolean
    e: {
      g: {
        h: {
          i: true
          j: 'string'
        }
        k: 'hello'
      }
      l: [
        'hi',
        {
          m: ['hey']
        },
      ]
    }
  }
}

type X2 = { a: string } | { b: number }

type Expected1 = {
  readonly a: () => 22
  readonly b: string
  readonly c: {
    readonly d: boolean
    readonly e: {
      readonly g: {
        readonly h: {
          readonly i: true
          readonly j: 'string'
        }
        readonly k: 'hello'
      }
      readonly l: readonly [
        'hi',
        {
          readonly m: readonly ['hey']
        },
      ]
    }
  }
}

type Expected2 = { readonly a: string } | { readonly b: number }

type DeepReadonly<T> = {
  readonly [key in keyof T] : keyof T[key] extends never ? T[key] : DeepReadonly<T[key]>
}

T 객체의 모든 키를 반복하며 해당 키(key)에 대한 keyof T[key]를 검색하여(T[key]의 key를 검사) 없으면 해당 값을 반환하여 readonly로, 있다면 재귀적으로 다시 해당 key에 대해 DeepReadonly로 들어간다.

10 - Tuple to Union

// 튜플 값으로 유니온 타입을 생성하는 제네릭 TupleToUnion<T>를 구현하세요.

// 예시
type Arr = ['1', '2', '3']

type Test = TupleToUnion<Arr> // expected to be '1' | '2' | '3'

/* _____________ 여기에 코드 입력 _____________ */

type TupleToUnion<T> = any

/* _____________ 테스트 케이스 _____________ */
import type { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<TupleToUnion<[123, '456', true]>, 123 | '456' | true>>,
  Expect<Equal<TupleToUnion<[123]>, 123>>,
]

type TupleToUnion<T extends readonly any[]> = T[number];

12 - Chainable Options

// 체인 가능 옵션은 일반적으로 Javascript에서 사용됩니다. 
// 하지만 TypeScript로 전환하면 제대로 구현할 수 있나요?

// 이 챌린지에서는 option(key, value)과 get() 두가지 함수를 제공하는 
// 객체(또는 클래스) 타입을 구현해야 합니다. 
// 현재 타입을 option으로 지정된 키와 값으로 확장할 수 있고 
// get으로 최종 결과를 가져올 수 있어야 합니다.


// 예시
declare const config: Chainable

const result = config
  .option('foo', 123)
  .option('name', 'type-challenges')
  .option('bar', { value: 'Hello World' })
  .get()

// 결과는 다음과 같습니다:
interface Result {
  foo: number
  name: string
  bar: {
    value: string
  }
}

// 문제를 해결하기 위해 js/ts 로직을 작성할 필요는 없습니다. 단지 타입 수준입니다.

// key는 string만 허용하고 value는 무엇이든 될 수 있다고 가정합니다. 
// 같은 key는 두 번 전달되지 않습니다.

/* _____________ 여기에 코드 입력 _____________ */

type Chainable = {
  option(key: string, value: any): any
  get(): any
}

/* _____________ 테스트 케이스 _____________ */
import type { Alike, Expect } from '@type-challenges/utils'

declare const a: Chainable

const result1 = a
  .option('foo', 123)
  .option('bar', { value: 'Hello World' })
  .option('name', 'type-challenges')
  .get()

const result2 = a
  .option('name', 'another name')
  // @ts-expect-error
  .option('name', 'last name')
  .get()

const result3 = a
  .option('name', 'another name')
  // @ts-expect-error
  .option('name', 123)
  .get()

type cases = [
  Expect<Alike<typeof result1, Expected1>>,
  Expect<Alike<typeof result2, Expected2>>,
  Expect<Alike<typeof result3, Expected3>>,
]

type Expected1 = {
  foo: number
  bar: {
    value: string
  }
  name: string
}

type Expected2 = {
  name: string
}

type Expected3 = {
  name: number
}

Chainable<T> 타입은 option(key, value), get() 두 함수를 갖고 있다.

option(key, value) : key, value를 입력받아 객체를 확장한다.
- key는 string만, value는 무엇이든 올 수 있다.
- 같은 key는 후에 선언된 value로 갱신된다.
get() : 현재까지 만들어진 객체를 반환한다.

처음 작성한 답은 아래와 같다.

// 유틸리티 타입, 구현하지 않고 Record<K,V>를 사용해도 됨
type Record<K extends string, V> = {
  [key in K] : V;
}

type Chainable<T = {}> = {
  option: <K extends string, V>(key: K, value: V) => Chainable<T & Record<K,V>>
  get: () => T
}

이 경우 result3이 Expected3과 달리 교차되며 string | number로 추론된다.

type Expected3 = {
  name: number
}

그렇기 때문에 기존 존재하는 (key, value)를 제거시키고 신규로 입력된 (key, value)로 갱신시키는 부분이 필요하다.

해당부분은 Omit을 사용하면 된다.

// Omit과 Record는 구현하지 않아도 된다.
type Omit<T, K> = {
  [key in keyof T as key extends K? never: key] : T[key];
}

type Record<K extends string, V> = {
  [key in K] : V;
}

type Chainable<T = {}> = {
  option:<K extends string, V>(key:K, value:V) => Chainable<Omit<T,K> & Record<K,V>>
  get: () => T
}