为何TypeScript未检测到这段组件代码的类型错误？

问题描述 #

我是TypeScript新手，编写了如下代码：

function Component(props: number) {
  return <h1>Hello World</h1>;
}

root.render(<Component thing={true} />);

执行tsc --noEmit --watch命令后，返回结果为[8:28:01 PM] Found 0 errors. Watching for file changes.，但显然组件接收的props应为对象而非number类型，请问这一现象的原因是什么？

问题根源 #

1. 宽松的TypeScript类型检查配置：如果你的tsconfig.json中关闭了strict模式（或单独关闭了noImplicitAny、strictFunctionTypes等关键选项），TypeScript会对类型不匹配的情况持宽松态度。JSX语法会把props打包成对象传入组件，但在宽松模式下，这个对象会被隐式推断为any类型，而any可以兼容你定义的number类型，因此不会触发报错。

2. 缺失或错误的React类型支持：若未安装@types/react和@types/react-dom，或者tsconfig.json的jsx选项配置错误（比如使用旧版的"react"而非"react-jsx"），TypeScript无法正确识别React组件的props类型规则，会跳过对JSX props的校验逻辑。

3. 组件参数的类型定义逻辑偏差：React组件的props始终以对象形式传递，但你将参数类型定义为number。在非严格模式下，TypeScript不会强制校验传入值的实际类型是否与定义完全匹配——只要传入值能被隐式转换为定义类型（或被视为any），就不会报错。

修复方案 #

• 安装React的类型声明依赖：

  npm install @types/react @types/react-dom --save-dev
  

• 配置tsconfig.json开启严格模式（TypeScript项目的最佳实践）：

  {
    "compilerOptions": {
      "strict": true,
      "jsx": "react-jsx", // 适配React 17+的自动JSX转换
      "target": "ESNext",
      "module": "ESNext"
    }
  }
  

• 正确定义组件的props类型：

  // 方式1：直接定义props对象类型
  function Component(props: { thing: boolean }) {
    return <h1>Hello World</h1>;
  }
  
  // 方式2：使用interface复用类型
  interface ComponentProps {
    thing: boolean;
  }
  function Component(props: ComponentProps) {
    return <h1>Hello World</h1>;
  }
  

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