typescript catch 值类型报错解决方案

抓狂：typescript 不设置 catch 值类型，会报 unknown 错误，设置了又会报 Catch 子句变量不能有类型批注 错误。这个该怎么办？

前言

使用 vscode 开发 react + typescript 有一段时间了，被 vscode 里面的插件机制深深地吸引了，需要什么快捷提示，安装一个它对应的插件即可。心里默默赞叹，这开发工具，真的帮助开发省去了不少时间。

然后，奇怪的事情，就这样发生了~~~

问题

为方便开发 typescript 项目，在插件库中搜索了 JavaScript and TypeScript Nightly 插件，582k 的安装量，心想应该不会有什么问题吧。于是，不知什么时候，之前开发过程中使用得很开心的try catch语句，神奇地报了个错误。

(local var) err: unknown？

操作

好吧！没有定义它的类型是吧~~~

来来来，直接上代码

try {
  // do something
} catch (err: any) {
  showErrorMsg(err.message);
}

完事儿，就这么简单？

确实，我的电脑上是 OK 了。

同事使用 mac 电脑 pull 下来了最新的代码后

设置成 any 也会报错，这是什么情况？

然后各种 google 查找资料。

大家的回答都很统一（可能大家没有遇见和我相似的问题），回答的大概内容是，通过抛出不同的 error，catch 对应的 error 值类型也可能是多样的，不确定的，如果我们想具体处理 error 中的值，需要在 catch 判断 error 值的类型，然后分开处理。示例如下：

try {
  myroutine(); // There's a couple of errors thrown here
} catch (e) {
  if (e instanceof TypeError) {
    // A TypeError
  } else if (e instanceof RangeError) {
    // Handle the RangeError
  } else if (e instanceof EvalError) {
    // you guessed it: EvalError
  } else if (typeof e === "string") {
    // The error is a string
  } else if (axios.isAxiosError(e)) {
    // axios does an error check for us!
  } else {
    // everything else  
    logMyErrors(e);
  }
}

The broad set of possible values, the single catch clause, and the uncertainty of errors that happen only allow two possible types for e: any and unknown.

https://fettblog.eu/typescript-typing-catch-clauses/

我真的要这样做吗？我只想在 catch 中提示一下 error 中的 message 信息，如果每个地方都要这样写，那我不知要多花多少时间来处理这个才行。

不行，一定有解决办法的！

查找了几乎所有的和这个问题相关的信息。最后，还是没有找到我需要的答案。

回到问题发生的地方，突然眼前一亮。

大约几秒钟之后，再看它的类型：

从 any 变成了 unknown?

问题找到了，不是 windows 和 mac 系统差异问题，很有可能是自己使用 vscode 的问题。

然后查找了一下我目前当前的 typescript 插件，确实有安装过JavaScript and TypeScript Nightly插件，尝试把它卸载后，重启 vscode，没有再报这个错误了。再安装回来，一阵 loading 后，又报上了上面提到的错误。基本可以确定，问题就是在这里。

2021年9月13日更新

通过上述方法移除了JavaScript and TypeScript Nightly插件后，在 2021年9月之前，没有更新 Typescript 版本，一直没有问题。后面拉了最新的代码后，TS 版本最新更新到了 4.4 版本后。对 try catch 中 catch 的默认值进行了修改，修改改了 unknow。如果我们不想修改 catch(err) 中 err 的类型值。可以设置 TS 的编译配置 useUnknownInCatchVariables: false。

配置如下所示：

{
  "compilerOptions": {
    ...
    "useUnknownInCatchVariables": false,
    ...
  }
}

参考链接：https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/#use-unknown-catch-variables