Typescript可选参数失效报TS2554，Laravel+Vue项目配置问题排查

问题根因 #

你遇到的两类报错（已声明类型的参数报隐式any、可选参数被识别为必填），核心是webpack编译环节的ts-loader没有正确加载你编写的tsconfig.json配置，编译时使用了TypeScript的默认规则，没有生效你定义的配置项，甚至可能存在TypeScript版本冲突问题。

解决方案 #

按以下顺序排查修改即可：

1. 确认tsconfig.json存放位置
   必须放在项目根目录，和webpack.config.js、Laravel Mix配置文件处于同一层级。如果存放在子目录，需要手动指定配置文件路径。
2. 修改webpack配置，显式指定tsconfig路径
   找到webpack配置中.ts文件的加载规则，添加configFile配置项显式指定配置文件路径：

   {
     test: /\.ts$/,
     exclude: /node_modules/,
     loader: 'ts-loader',
     options: { 
       appendTsSuffixTo: [/\.vue$/],
       // 新增下面这行，显式指定tsconfig的绝对路径
       configFile: path.resolve(__dirname, 'tsconfig.json')
     },
   }
   

3. 修改Laravel Mix配置，避免默认配置覆盖
   Laravel Mix自带TypeScript处理逻辑，会默认使用内置配置，你可以在调用ts方法时显式指定配置文件：
   把原来的.ts('resources/assets/js/app.ts', 'public/js')改为：

   .ts('resources/assets/js/app.ts', 'public/js', { configFile: 'tsconfig.json' })
   

4. 排查TypeScript版本冲突
   执行npm ls typescript（npm环境）或yarn list typescript（yarn环境），检查是否存在多个版本的TypeScript，如果存在则统一安装为4.2.4版本，避免版本差异导致的语法识别异常。
5. 清理缓存重新编译
   删除node_modules/.cache目录后再执行编译命令，避免旧缓存导致配置不生效。

校验方法 #

修改完成后可以在项目根目录执行npx tsc --noEmit，直接调用TypeScript官方编译器校验代码，如果没有报错，就可以确认配置已经正常生效，后续走webpack编译也不会再出现异常。

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