如何基于TypeScript接口属性创建单属性对象联合类型

参考基础类型 #

type State = {
  data: any[]
  index: number
  size: number
  count: number
  loading: boolean
  error: string | undefined
}

实现代码 #

通过映射类型遍历原类型键，为每个键生成独立单属性对象后，再通过索引访问合并为联合类型即可，通用写法如下：

type SinglePropUnion<T> = {
  [K in keyof T]: { [Key in K]: T[K] }
}[keyof T]

// 应用到State类型
type StateUnion = SinglePropUnion<State>

推导结果 #

StateUnion的最终类型完全匹配需求结构：

{ data: any[] } | { index: number } | { size: number } | { count: number } | { loading: boolean } | { error: string | undefined }

原理解释 #

• 直接使用State[keyof State]只能拿到属性值类型的联合，本质是缺少了单属性对象的包装层
• 写法中[K in keyof T]会遍历原类型的所有公共键，为每个键生成一个映射项，项的值就是仅包含当前键的单属性对象
• 末尾的[keyof T]会把映射结果里所有的单属性对象提取出来，自动合并为联合类型，这是TypeScript映射类型的默认特性，不需要额外引入条件类型做分发。

内容的提问来源于stack exchange，提问作者Antonio Santoro