✍ 공부/TypeScript

[type-challenges] Append to object

Po_tta_tt0 2023. 6. 27. 07:46
반응형

문제

주어진 인터페이스에 새로운 필드를 추가한 object 타입을 구현하세요. 이 타입은 세 개의 인자를 받습니다.

설명


/* _____________ Your Code Here _____________ */

type AppendToObject<T, U extends string | number | symbol, V> = {[P in keyof T | U]:P extends keyof T ? T[P] : V}

/* _____________ Test Cases _____________ */
import type { Equal, Expect } from '@type-challenges/utils'


type test1 = {
  key: 'cat'
  value: 'green'
}

type testExpect1 = {
  key: 'cat'
  value: 'green'
  home: boolean
}

type test2 = {
  key: 'dog' | undefined
  value: 'white'
  sun: true
}

type testExpect2 = {
  key: 'dog' | undefined
  value: 'white'
  sun: true
  home: 1
}

type test3 = {
  key: 'cow'
  value: 'yellow'
  sun: false
}

type testExpect3 = {
  key: 'cow'
  value: 'yellow'
  sun: false
  moon: false | undefined
}

type cases = [
  Expect<Equal<AppendToObject<test1, 'home', boolean>, testExpect1>>,
  Expect<Equal<AppendToObject<test2, 'home', 1>, testExpect2>>,
  Expect<Equal<AppendToObject<test3, 'moon', false | undefined>, testExpect3>>,
]

너무 어려웠다
type AppendToObject<T, U extends string | number | symbol, V> = {[P in keyof T | U]:P extends keyof T ? T[P] : V}
하나하나 분석해보자

type AppendToObject<T, U, V> = {[P in keyof T | U]:P extends keyof T ? T[P] : V}
선수지식

  1. 타입스크립트 객체에 대한 지식 {[P in keyof T]:T[P]}가 타입 객체를 만든다는 것을 알면 된다!
  2. P extends T ? '통과시' : '실패시'는 P가 T를 포괄하는 타입 형태를 가질 때, 통과, 아니면 실패로 간다
  3. type AppendToObject<T, U extends string | number | symbol, V> = {[P in keyof T | U]:'안녕'}

    type t = { home: "안녕"; key: "안녕"; value: "안녕"; }
    모양으로 만들어진다
    배열 내부에 유니온 타입으로 작성한 내용은, 순차적으로 하나씩 실행된다는 것!
  4. type TTT<T extends string | number | symbol,K extends string | number | symbol,P extends string | number | symbol> = {[R in T|K|P]:'하이'}
    type tt = TTT<'a','b','c'>
    type tt = { a: "하이"; b: "하이"; c: "하이"; } // 이렇게 나옵니다!

 

그럼 이제 문제에 들어가볼까요


type AppendToObject<T, U extends string | number | symbol, V> = {[P in keyof T | U]:P extends keyof T ? T[P] : V}


는, T,U,V를 받는데, U는 key로 기능해야 하기 때문에 string | number | symbol을 extends해줘야 합니다.

 

그리고 위에서 했던것과 마찬가지로,
keyof T(T 객체에 있는 key)와 U를 돌면서 P를 만들어줍니다


그리고 P가 keyof T를 extends 할 시 (= T에 들어있는 key일 시)
T[P](= T[key]의 value)
를 value로 주고,


그게 아닐 시(=U)
V를 value로 줍니다

 

 

 

반응형