React Typescript项目Prop类型未触发校验报错是什么原因？

问题原因与解决方案 #

你的问题核心是类型校验流程没有正确触发，按照以下步骤排查修复即可：

1. 确认调用文件后缀 #

首先检查你调用<Expire>组件的文件后缀是否为.tsx，如果是.js/.jsx后缀，TypeScript默认不会对这类文件内的React组件调用做类型校验，直接修改后缀为.tsx即可。

2. 修正Laravel Mix配置 #

Laravel Mix 6+本身已原生支持TypeScript，你不需要手动添加ts-loader相关配置，重复配置会导致加载逻辑冲突，甚至跳过类型校验。
将你的webpack.mix.js简化为以下内容即可：

const mix = require('laravel-mix');

mix.ts('resources/js/app.tsx', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css');

注意把原来的mix.js改成mix.ts，这是Mix处理TypeScript入口的标准写法。

3. 补充独立类型检查流程 #

无论是ts-loader开启转译-only模式，还是Babel处理TypeScript，默认都只会擦除类型语法做转译，不会执行全量类型校验。你需要在package.json的scripts中新增单独的类型检查命令：

{
  "scripts": {
    "type-check": "tsc --noEmit",
    "production": "tsc --noEmit && mix --production"
  }
}

• 日常开发可以执行npm run type-check主动扫描全量类型错误
• 生产构建命令加了前置类型检查，有类型错误时会直接阻断打包，避免问题上线

4. 路径校验 #

确认你调用组件的文件在tsconfig.json的include指定路径内，也就是resources/js目录下，不在的话需要补充到include数组中。

额外优化点 #

你的代码里有两处小的类型问题可以顺带修复：

• Props中的reset方法你在组件内做了存在性判断，说明它是可选属性，应该定义为reset?: () => void，否则不传reset时会触发类型错误
• useState<Boolean>(true)中的Boolean是JS包装对象类型，应该用基础类型boolean：useState<boolean>(true)

修复完成后，传入字符串给delay属性时，无论是IDE实时提示还是执行类型检查命令，都会抛出明确的类型不匹配错误。

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