(从findLastIndex说起)为什么ts编译的时候报错,但在vscode编辑器中却是正常的?

842 阅读2分钟

小伙伴们在vscode中写ts时,肯定也有遇到过这样的问题:

使用某些ES的API,比如我这里使用了findLastIndex,在编辑器中报错了:

image.png

根据提示,很容易找到解决方法,只需要在tsconfig.json中加入下面的配置即可:

{
  "compilerOptions": {
    "lib": ["ESNext","dom"]
  },
}

这个很容易理解,因为findLastIndex这个数组API声明在es2023这个声明文件中,这里引入 ESNext可以一劳永逸,引入 es 中新的api。

OK!编辑器中不报错了。但是事情并没有结束,在构建时,ts检查过程中发现了错误:

image.png

写代码时不报错,编译时却报错??这种问题大概率会让人抓狂。

冷静分析一下为什么:在编辑器中的ts提示/报错,是ts的编译服务(compile service)给出的;编译时的报错,同样也是编译器服务给出的。那大概率是因为两个编译服务运行的代码不一样造成的,猜测是版本不一样。

果然,点击 状态栏—>typescript旁边的{},或者执行vsc命令:Typescript:Select Typescript Version,会发现:

image.png

当前编辑器中使用的vscode版本是 5.5.2,而我工作区的版本是 4.9.5 (package-lock.json中安装的ts版本)。

那一切就说得通了,根据ts的官方文档:VS Code附带了TypeScript语言服务的最新稳定版本,并默认使用此版本在您的工作区中提供IntelliSense。TypeScript的工作区版本独立于您用来编译*.ts文件的TypeScript版本。参考链接:code.visualstudio.com/docs/typesc…

解决方法显而易见,把编辑器的ts语言服务的版本改为和项目的一致即可

改成4.9.5之后,可以发现:lib中填 ES2023会报错了,引用这个ts版本中没有es2023的声明:

image.png

相应的 findLastIndex 自然也会报错。

如果我们想用 es2023,把ts升级到 5.0 以上即可。如果项目不让升ts版本怎么办?这个时候可能需要额外安装 es2023的d.ts才行,小伙伴们可以去探索一下。

附:

有一些跟ts语言服务版本相关的vsc配置:

image.png 1、在选择编辑器的ts版本时,图中列出了vscode内置的ts版本,以及工作区的版本。如果我们想要更多可选择的版本,可以在vsc中配置 Typesciprt:Tsdk

2、这个项目我们配置好了,解决了这个问题,可能下个项目又忘了保持编辑器的ts版本和运行的ts版本一致;或者说,这个项目的其他人不知道这个问题。vsc中有个配置 Typescript:Enable Prompt Use Workspace Tsdk,启用后,下次可以提醒我们 是否使用工作区的ts版本来进行代码提示。