Angular中Dish接口继承引发类型缺失错误的问题排查

我定义了两个TypeScript接口：

interface DishComponent {
  componentId: string;
  componentQuantity: number;
}

interface Dish extends DishComponent {
  name: string;
  components: DishComponent[];
  totalCost: number;
}

在Angular组件中创建Dish实例时，比如写了类似这样的代码：

const myDish: Dish = {
  name: '番茄炒蛋',
  components: [],
  totalCost: 15
};

收到TypeScript错误提示：类型 "{ name: string; components: never[]; totalCost: number; }" 缺少类型 "Dish" 中的以下属性: componentId, componentQuantity ts(2739)，完全搞不懂为什么会出现这个问题。

TypeScript里接口继承的核心逻辑是：子接口必须包含父接口的所有属性。这里Dish继承了DishComponent，就意味着任何标注为Dish类型的对象，都必须同时拥有componentId、componentQuantity这两个父接口的属性，以及Dish自身定义的name、components、totalCost属性。你创建实例时没提供前两个属性，所以触发了ts(2739)错误。

直接移除Dish接口定义里的extends DishComponent关键字，修改后的接口如下：

interface DishComponent {
  componentId: string;
  componentQuantity: number;
}

interface Dish {
  name: string;
  components: DishComponent[];
  totalCost: number;
}

这样Dish就不再需要继承DishComponent的属性，创建实例时只需要提供自身定义的三个属性即可，错误会直接消失。

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