TypeScript中复用购物车项与附加项类型的更优实现咨询

问题场景 #

需要为购物车主项和附加项定义类型，二者共享大量核心字段。最初的写法存在字段冗余，后续尝试用Omit+交叉类型实现复用，但IDE hover时无法正常显示类型的键，需要更稳健的实现方式。

最初的冗余类型写法：

type iCart = {
  productId: string
  name: string
  description: string
  unitPrice: number
  netTotal: number
  quantity: number
  taxTotals?: { [key: string]: string }[]
  addons:[
   addonId: string
   name: string
   description: string
   unitPrice: number
   netTotal: number
   quantity: number
   taxTotals?: { [key: string]: string }[]
  ]
}

尝试的复用写法（存在IDE显示问题）：

export type iCartItem = {
  productId: string
  addonId:string
  name: string
  description: string
  unitPrice: number
  netTotal: number
  quantity: number
  taxTotals?: { [key: string]: string }[]
  period: iPeriod
}
type iCart = Omit<iCartItem, 'addonId'> & { addons?: Omit<iCartItem, 'productId'>[] }

稳健实现方案 #

核心思路是先提取公共核心字段类型，再基于公共类型分别扩展主项和附加项的专属字段，这样类型结构清晰，IDE能正常解析并显示所有字段，同时保证复用性：

// 提取公共核心字段，集中维护
type CartItemCore = {
  name: string
  description: string
  unitPrice: number
  netTotal: number
  quantity: number
  taxTotals?: { [key: string]: string }[]
  period: iPeriod
}

// 购物车主项：公共核心字段 + 专属的productId + 附加项列表
type CartMainItem = CartItemCore & {
  productId: string
  addons?: CartAddonItem[]
}

// 购物车附加项：公共核心字段 + 专属的addonId
type CartAddonItem = CartItemCore & {
  addonId: string
}

// 最终的购物车顶层类型
type iCart = CartMainItem

方案优势 #

• 公共字段集中维护，修改时只需改动一处，避免冗余维护成本
• IDE可正常识别并显示所有字段，hover时能完整查看类型定义
• 避免Omit带来的类型解析模糊问题，整体类型可读性、可维护性更强

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