仅Mac设备运行React TypeScript项目出现TS2322编译错误如何解决

报错原因 #

这个错误本质是TypeScript版本差异导致的，和设备硬件无关：

• TS 4.4及以上版本默认开启了useUnknownInCatchVariables编译规则，会自动将catch块捕获的error变量类型设为unknown
• 你的其他设备上运行的是4.4以下版本的TypeScript，catch块的error默认是any类型，不会触发类型校验报错，而Mac设备上装的是更高版本的TS，所以才会单独报错。
• 你可以分别在不同设备的项目根目录执行npx tsc -v确认TS版本差异，建议把package.json里的typescript依赖版本写死，不要用^/~等允许自动升级的版本符，重新安装依赖即可统一各设备的编译环境。

修复方案 #

方案1：调整状态类型定义（推荐） #

直接修改你setState对应状态的类型声明，将error字段的类型从原来的null调整为unknown | null或者Error | null，就能直接匹配赋值的类型。

方案2：对catch的error做类型收窄 #

如果你不想修改原有状态类型，可以对捕获的error做类型判断后再赋值：

catch (error) {
  let formattedError: null | Error = null
  if (error instanceof Error) {
    formattedError = error
  }
  setState({ status: RequestStatus.ERROR, error: formattedError, data: null })
}

方案3：关闭对应编译规则 #

如果不需要catch变量的严格类型校验，可以在项目的tsconfig.json中添加配置关闭规则，回到旧版本TS的编译逻辑：

{
  "compilerOptions": {
    "useUnknownInCatchVariables": false
  }
}

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