为何React+TypeScript对含短横线的不存在属性不报错？

在React项目中使用TypeScript时，会遇到一个特殊的类型校验现象：给组件传递带短横线的不存在属性（例如something-something）时，TypeScript不会报错；但传递不含短横线的错误属性（比如nam），就会触发类型校验错误。

代码示例 #

无报错场景（带短横线的不存在属性）

export default function App() {
  return (
    <div>
      <h1>App</h1>
      <Hello
        something-something={'a'} // 属性不存在但未触发报错
        name={'World'}
      />
    </div>
  );
}

function Hello({ name }: { name: string }) {
  return <p>Hello {name}</p>;
}

报错场景（不含短横线的错误属性）

<Hello nam={'World'} />

背后的原因 #

这是TypeScript针对React组件属性的内置校验规则导致的：

• 带短横线的属性会被识别为类似data-*的自定义扩展属性，这类属性在React中默认允许传递给任意组件，TypeScript不会对其进行严格的props类型校验。
• 不含短横线的属性会被严格匹配组件定义的props类型，只要组件未声明该属性，就会触发类型错误。

如果需要严格禁止传递未定义的带短横线属性，可以通过以下方式实现：

• 给组件props定义添加exact类型约束，确保只有声明的属性能被传递
• 在tsconfig.json中配置"strict": true或相关类型校验规则，增强属性校验的严格性

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