TypeScript type与interface同名属性类型冲突问题

复现场景 #

首先定义两个包含同名属性、但属性类型不同的类型：

type A = {
  myProperty: string
}

type B = {
  myProperty: number
}

• 使用interface同时继承这两个类型时，TS会在声明阶段直接抛出类型错误：

interface C extends A, B {}

对应报错信息：

Interface 'C' cannot simultaneously extend types 'A' and 'B'.
  Named property 'myProperty' of types 'A' and 'B' are not identical.

• 但使用type配合交叉运算符&合并两个类型时，声明阶段不会抛出任何异常：

type C = A & B; // 无声明阶段报错

实际调用时会出现异常：

function F(myParameter: C) {
  console.log(myParameter);
}

F({myProperty: 90}); // 类型报错
F({myProperty: 'test data'}); // 同样类型报错

对应报错信息：

(property) myProperty: never
Type 'number' is not assignable to type 'never'.ts(2322)
index.ts(3, 3): The expected type comes from property 'myProperty' which is declared here on type 'C'

问题解答 #

交叉后myProperty的最终类型 #

交叉类型处理同名属性的规则是取所有同名属性类型的交集：一个值必须同时满足所有交叉来源的类型约束，才算符合交叉后的类型。
string和number没有公共的交集类型（不存在某个值既是字符串又是数字），因此myProperty最终被推导为never类型，这也是无论传入字符串还是数字都会报类型错误的根本原因。

对比接口继承的校验逻辑：接口在多继承时会提前做父类型的兼容性校验，如果父类型间同名属性类型不兼容，会直接在继承阶段抛出错误，不会生成带有never属性的无效类型。

查看合并后实际类型的方法 #

两种最常用的方式：

• 直接在支持TypeScript语言服务的编辑器（比如VS Code）中，将鼠标悬停在类型名C或者属性myProperty上，会直接弹出TS推导完成的完整类型信息。
• 写简单的测试代码验证：声明一个变量标注为C['myProperty']类型，尝试给它赋值任意值，从TS的报错提示中就能看到该属性实际要求的类型。

该场景的最佳处理方式 #

根据实际业务诉求选择对应方案即可：

• 如果业务逻辑中myProperty确实可能为字符串或者数字，不要直接交叉原始类型，显式覆盖冲突属性的类型：

  // 先移除两个类型中的冲突属性，再重新定义属性的联合类型
  type C = Omit<A, 'myProperty'> & Omit<B, 'myProperty'> & {
    myProperty: string | number
  }
  // 也可以直接在交叉后覆盖属性，后定义的同名属性类型会覆盖前面的推导结果
  type C = A & B & {
    myProperty: string | number
  }
  

• 如果业务上两个类型的myProperty本就应该是同一种类型，说明前期类型定义存在错误，直接修正A或B的属性类型，保证同名属性类型兼容，从根源避免冲突。
• 如果两个类型的myProperty本来就是完全不同语义的属性，只是恰好重名，不要做交叉合并，要么给属性重命名区分语义，要么改用联合类型配合类型守卫做场景区分。

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