父子组件Props类型：为何TypeScript未给出警告？

为什么TypeScript没给出类型不匹配警告？ #

TypeScript采用结构类型系统，核心逻辑是：只要传入类型的结构包含目标类型要求的所有字段，且字段类型兼容，就会被判定为类型匹配，哪怕传入类型带有额外字段。

你的场景中，IRecordDetail包含了IRecordItemDetail要求的name和itemNumber字段，且类型完全一致，所以TS默认不会抛出错误。这种设计是为了支持鸭子类型逻辑，提升代码灵活性。

你的预期是否合理？ #

从严格类型匹配的角度来看，你的预期是合理的——如果希望组件仅接收完全符合定义的Props、不允许额外字段，确实需要TS提供警告。但TS默认行为优先兼容灵活性，因此需要手动配置规则或修改类型定义来实现严格检查。

如何强制禁止传递额外Props？ #

有两种可靠的实现方式：

1. 给目标类型添加never索引签名 #

通过定义[key: string]: never，明确禁止任何未声明的额外属性：

interface IRecordItemDetail {
  name: string;
  itemNumber: string;
  // 禁止所有未定义的字符串键属性
  [key: string]: never;
}

type ChildProps = {
  recordDetail: IRecordItemDetail;
};

此时如果传入的recordDetail包含额外字段（比如IRecordDetail的id），TS会直接抛出类型错误，因为额外字段的类型无法匹配never。

2. 利用对象字面量的默认额外属性检查 #

如果是直接向组件传递对象字面量，TS默认会检查额外属性：

// 直接传字面量会报错：对象字面量只能指定已知属性，'id'不在类型'IRecordItemDetail'中
<Child recordDetail={{ name: "test", itemNumber: "123", id: 1 }} />

但如果是传递已定义的变量（比如你的场景中的recordDetail变量），TS默认不会触发该检查，此时就需要用第一种方法强制限制。

补充：React组件的严格检查强化 #

如果是React组件，还可以通过泛型+类型约束实现更严格的检查：

const Child = <T extends IRecordItemDetail & Record<string, never>>(props: { recordDetail: T }) => {
  return <div>{props.recordDetail.name}</div>;
};

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