TypeScript构造函数无默认值参数提示TS7006隐式any类型报错

创建包含带参构造函数的TypeScript类时触发TS7006类型错误，为构造函数参数添加默认值后报错消失，两种写法均符合官方TypeScript语法规范。

触发报错的代码 #

class Foo {
  id: string;

  constructor(id: string) {
    this.id = id;
  }
}

报错信息 #

ERROR in /home/me/my-project/resources/js/app.ts
./resources/js/app.ts 4:16-18
[tsl] ERROR in /home/me/my-project/resources/js/app.ts(4,17)
      TS7006: Parameter 'id' implicitly has an 'any' type.

无报错的对照代码 #

为构造函数id参数设置空字符串默认值后，不再触发报错：

class Foo {
  id: string;

  constructor(id: string = '') {
    this.id = id;
  }
}

• Laravel Mix 版本：6.0.48
• TypeScript 版本：4.7.3
• 项目tsconfig.json配置如下：

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "skipLibCheck": true,
    "baseUrl": "resources/js",
    "paths": {
      "@/*": [ "*" ]
    }
  },
  "include": [
    "resources/**/*.ts",
    "resources/**/*.d.ts",
    "resources/**/*.tsx",
    "resources/**/*.vue"
  ]
}

该问题是Laravel Mix 6内置ts-loader的路径解析bug导致：构建时ts-loader没有正确加载项目根目录的tsconfig.json配置，无法识别手动标注的参数类型，误将显式标注为string类型的id参数判定为无类型标注的隐式any类型，从而抛出TS7006错误。
当为参数设置默认值时，TypeScript可以直接通过默认值推导出参数类型为string，不需要依赖显式类型标注和配置文件的解析规则，因此不会触发报错。

二选一即可：

1. 修改webpack.mix.js配置，手动为ts-loader指定tsconfig文件路径，确保构建时正确加载类型规则：

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

mix.ts('resources/js/app.ts', 'public/js', {
  compilerOptions: {
    configFile: process.cwd() + '/tsconfig.json'
  }
});

2. 改用TypeScript参数属性简写语法定义类，绕过类型解析bug，代码更简洁：

class Foo {
  constructor(public id: string) {}
}

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