TypeScript未强制执行泛型交叉类型（React组件Props）问题咨询

没错，你遇到的这种情况完全符合TypeScript结合React官方类型定义的预期。下面我来拆解背后的原因，再分享几种实现严格Props检查的方法：

为什么额外Props不会触发报错？ #

核心原因有两个：

1. TypeScript的结构类型系统：TypeScript采用结构类型而非名义类型，只要一个对象包含目标类型的所有必填属性，哪怕多出额外属性，也会被认为是兼容的。这是TypeScript类型系统的核心特性之一，目的是提升灵活性。
2. React类型定义的设计妥协：React的组件类型（包括React.PureComponent）默认遵循这种结构兼容性。这是为了兼容JSX的实际使用场景——比如你可能会给自定义组件传递className、style这类DOM原生属性，哪怕组件没有显式声明这些Props，React也会把它们透传给底层元素，所以类型定义没有强制禁止额外属性。

举个你提到的简化场景例子：

class MyComponent<TChildProps> extends React.PureComponent<TChildProps> {
  render() {
    return <div {...this.props} />;
  }
}

// 这里传入未定义的foo属性，TypeScript不会报错
<MyComponent foo="test" />

此时TypeScript会自动推断TChildProps为{ foo: string }，而不是你期望的“必须匹配某个预先定义的Props类型、不能有额外属性”——泛型参数的自动推断会把所有传入的Props都纳入类型范围。

如何实现严格的Props检查（阻止未定义Props） #

如果你需要强制组件只能接受预定义的Props，不能传入额外属性，可以用以下几种方法：

1. 显式指定泛型参数 #

使用组件时，明确传入你期望的Props类型，而不是让TypeScript自动推断：

// 假设你期望组件只能接受空Props
<MyComponent<{}> foo="test" /> 
// 此时TypeScript会报错：类型“{ foo: string; }”不能赋值给类型“{}”

2. 自定义Exact类型约束 #

TypeScript没有原生的“精确类型”，但可以通过工具类型实现，强制要求传入的Props不能有额外属性：

// 定义Exact工具类型
type Exact<T, U> = T & Record<Exclude<keyof U, keyof T>, never>;

然后修改你的组件类型，用这个工具约束Props：

class MyComponent<TChildProps> extends React.PureComponent<Exact<TChildProps, TChildProps>> {
  render() {
    return <div {...this.props} />;
  }
}

// 此时传入foo会报错：类型“string”不能赋值给类型“never”
<MyComponent foo="test" />

这个工具类型的原理是：提取传入Props中超出目标类型的键，要求这些键的类型为never（即不存在），从而触发类型错误。

3. 函数组件的实现方式 #

如果是函数组件，同样可以结合Exact类型实现严格检查：

type Exact<T, U> = T & Record<Exclude<keyof U, keyof T>, never>;

const MyComponent = <TChildProps extends {}>(props: Exact<TChildProps, TChildProps>) => {
  return <div {...props} />;
};

// 传入未定义的foo会触发类型错误
<MyComponent foo="test" />

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