如何在TypeScript中为嵌套对象数组扩展类型添加id字段

你可以通过提取数组元素类型+交叉类型的方式，避免重复编写代码，实现类型扩展：

export type ImportationType = {
  commercialImportation: boolean
  dateToManufacturer: string
  barrels: {
    assumedAmount: number
    sealId: string
    uniqueIdentifier?: string
    dateShipped?: string
    dateImported?: string
  }[]
}

// 提取barrels数组的元素类型
type BarrelItem = ImportationType['barrels'][number]

// 生成更新后的类型
export type UpdatedImportationType = Omit<ImportationType, 'barrels'> & {
  barrels: (BarrelItem & { id: number })[]
}

或者更简洁的单行写法：

export type UpdatedImportationType = Omit<ImportationType, 'barrels'> & {
  barrels: (ImportationType['barrels'][number] & { id: number })[]
}

原理说明 #

1. Omit<ImportationType, 'barrels'>：移除原类型中的barrels属性，保留其他所有字段的定义
2. ImportationType['barrels'][number]：TypeScript中，数组类型通过[number]索引可以直接获取其内部元素的类型，这是实现无重复代码的关键技巧
3. (BarrelItem & { id: number })[]：将原数组元素类型与新增的id: number交叉，得到带id的新元素类型，再包装为数组
4. &交叉类型：把移除barrels后的原类型和新的barrels属性合并，得到完整的目标类型

分析你之前的错误写法 #

• 尝试1：...ImportationType["barrels"]无效是因为ImportationType["barrels"]是数组类型，不是单个对象类型，无法用对象展开语法处理类型。必须先通过[number]提取数组元素类型。
• 尝试2：直接交叉barrels: {id: number}[]会导致barrels类型变成原数组类型和新数组类型的交集。由于原数组元素没有id，新数组元素只有id，两者的交集是空类型，实际起不到扩展效果。

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