如何实现匹配静态接口的Jsonifiable类型？

在TypeScript中，以下3种类型均仅由原始类型（primitive types）、映射（maps）和数组构成，彼此十分相似：

type Color1 = { [component: string]: number }

type Color2 = {
  green: number
  red: number
  blue: number
}

interface Color3 {
  green: number
  red: number
  blue: number
}

如何设计一个能够匹配上述所有类型定义的类型？

常规的定义方式无法适配Color3：

type JsonPrimitive = string | number | boolean | null
type JsonifiableObject = { [Key in string]?: Jsonifiable }
type JsonifiableArray = readonly Jsonifiable[]
type Jsonifiable = JsonPrimitive | JsonifiableObject | JsonifiableArray

const color1 = {green: 1, red: 2, blue: 3} as Color1 as Jsonifiable
const color2 = {green: 1, red: 2, blue: 3} as Color2 as Jsonifiable
const color3 = {green: 1, red: 2, blue: 3} as Color3 as Jsonifiable

执行后会报错：

Conversion of type 'Color3' to type 'Jsonifiable' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'Color3' is not comparable to type 'JsonifiableObject'.
    Index signature for type 'string' is missing in type 'Color3'.

解决方案 #

问题核心在于JsonifiableObject的定义：它要求类型必须带有显式的字符串索引签名，但Color3是仅声明具名属性的接口，没有索引签名，因此无法匹配。

我们需要调整JsonifiableObject的定义，让它同时兼容带索引签名的对象和仅含具名属性的对象。有两种简洁的实现方式：

方式一：联合类型覆盖两种对象结构

type JsonPrimitive = string | number | boolean | null
// 同时兼容带可选索引签名的对象、带必填索引签名的对象
type JsonifiableObject = 
  | { [Key in string]?: Jsonifiable } 
  | Record<string, Jsonifiable>
type JsonifiableArray = readonly Jsonifiable[]
type Jsonifiable = JsonPrimitive | JsonifiableObject | JsonifiableArray

// 三种类型均可正常适配
const color1 = {green: 1, red: 2, blue: 3} as Color1 as Jsonifiable
const color2 = {green: 1, red: 2, blue: 3} as Color2 as Jsonifiable
const color3 = {green: 1, red: 2, blue: 3} as Color3 as Jsonifiable

方式二：用Record简化定义

Record<string, Jsonifiable | undefined>天然兼容带索引签名和具名属性的对象，写法更简洁：

type JsonPrimitive = string | number | boolean | null
type JsonifiableObject = Record<string, Jsonifiable | undefined>
type JsonifiableArray = readonly Jsonifiable[]
type Jsonifiable = JsonPrimitive | JsonifiableObject | JsonifiableArray

如果需要严格约束对象属性为必填，可将JsonifiableObject改为Record<string, Jsonifiable>，但前者的兼容性更强，能覆盖绝大多数JSON可序列化的对象结构。

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