TypeScript合并两个类型定义字段的正确写法及报错解决

你在类型定义里直接写...SubField1是JavaScript对象展开语法，仅能在值层面（也就是写实际JS对象、数组的时候）使用，不能直接放在TS的type对象结构里做类型合并，TS无法识别这种写法，才会抛出成员隐式为any的错误。

不需要手动逐一声明任何字段，两种TS原生方案都可以实现类型自动合并：

方案1：交叉类型（最简洁，适合纯合并场景） #

直接用交叉类型运算符&连接两个子类型即可，TS会自动把两个类型的所有属性合并为新类型：

type TableData = SubField1 & SubField2

这种写法下，后续如果SubField1或者SubField2新增、修改字段，TableData会自动同步变更，不需要手动维护。

方案2：interface继承（适合需要扩展额外属性的场景） #

如果你后续需要给表格行类型加专属字段（比如行选中状态、操作列配置标记等），用interface继承的写法更灵活：

interface TableData extends SubField1, SubField2 {
  // 额外扩展的表格专属字段直接写在这里，例如：
  // disabled?: boolean
}

注意类型定义和实际数据处理的语法不要混淆，处理接口返回的resultList生成表格数据源时，值层面的对象展开是合法的：

// 先定义接口原始返回的类型
interface ApiResp {
  resultList: Array<{
    subField: SubField1
    subField2: SubField2
  }>
}

// 转换为表格可直接用的数据源
const tableData: TableData[] = apiResponse.resultList.map(row => ({
  ...row.subField,
  ...row.subField2
}))

注意：如果两个合并的子类型存在重名字段，TS会自动做类型合并，若重名字段类型不兼容，合并后该字段类型会推导为never，这种场景需要手动处理字段冲突即可，你当前的两个子类型字段完全不重名，直接使用无问题。

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