小伙伴们在vscode中写ts时,肯定也有遇到过这样的问题:
使用某些ES的API,比如我这里使用了findLastIndex,在编辑器中报错了:
根据提示,很容易找到解决方法,只需要在tsconfig.json中加入下面的配置即可:
{
"compilerOptions": {
"lib": ["ESNext","dom"]
},
}
这个很容易理解,因为findLastIndex这个数组API声明在es2023这个声明文件中,这里引入 ESNext可以一劳永逸,引入 es 中新的api。
OK!编辑器中不报错了。但是事情并没有结束,在构建时,ts检查过程中发现了错误:
写代码时不报错,编译时却报错??这种问题大概率会让人抓狂。
冷静分析一下为什么:在编辑器中的ts提示/报错,是ts的编译服务(compile service)给出的;编译时的报错,同样也是编译器服务给出的。那大概率是因为两个编译服务运行的代码不一样造成的,猜测是版本不一样。
果然,点击 状态栏—>typescript旁边的{},或者执行vsc命令:Typescript:Select Typescript Version,会发现:
当前编辑器中使用的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的声明:
相应的 findLastIndex 自然也会报错。
如果我们想用 es2023,把ts升级到 5.0 以上即可。如果项目不让升ts版本怎么办?这个时候可能需要额外安装 es2023的d.ts才行,小伙伴们可以去探索一下。
附:
有一些跟ts语言服务版本相关的vsc配置:
1、在选择编辑器的ts版本时,图中列出了vscode内置的ts版本,以及工作区的版本。如果我们想要更多可选择的版本,可以在vsc中配置
Typesciprt:Tsdk;
2、这个项目我们配置好了,解决了这个问题,可能下个项目又忘了保持编辑器的ts版本和运行的ts版本一致;或者说,这个项目的其他人不知道这个问题。vsc中有个配置 Typescript:Enable Prompt Use Workspace Tsdk,启用后,下次可以提醒我们 是否使用工作区的ts版本来进行代码提示。