Skip to content

追加字段到对象

约 455 字大约 2 分钟

2022-12-01

题目

Github: AppendToObject

实现一个为接口添加一个新字段的类型。该类型接收三个参数,返回带有新字段的接口类型。

type Test = { id: '1' }
type Result = AppendToObject<Test, 'value', 4> // expected to be { id: '1', value: 4 }

解题思路

一开始可能会想到使用交叉类型来解决此挑战:

type AppendToObject<T, U extends PropertyKey, V> = T & { [K in U]: V }

然而我们需要留意到此挑战,需要 返回带有新字段的接口类型,这需要的是一个新的普通类型,而不是一个交叉类型。

首先我们可以先将 T 映射为一个普通类型:

type AppendToObject<T, U extends PropertyKey, V> = {
  [K in keyof T]: T[K]
}

接下来,我们可以就可以在 keyof T 的联合类型中,添加 泛型 U

type AppendToObject<T, U extends PropertyKey, V> = {
  [K in keyof T | U]: T[K]
}

但是 K 如果为类型 U 时,很明显 T[K] 不满足要求,它的值类型应为 V

type AppendToObject<T, U extends PropertyKey, V> = {
  [K in keyof T | U]: K extends keyof T ? T[K] : V
}

答案

type AppendToObject<T, U extends PropertyKey, V> = { 
  [K in keyof T | U]: K extends keyof T ? T[K] : V
}

验证

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
>>,
]

参考