在VS Code中利用@types增强JavaScript智能提示与类型检查

利用类型声明增强VS Code JavaScript智能提示

通过引入类型定义文件，可以显著增强Visual Studio Code中JavaScript代码的智能提示效果。

Visual Studio Code由微软开发，其自身即基于TypeScript构建，因此成为开发TypeScript项目的理想选择。

熟悉TypeScript的开发者通常了解*.d.ts类型声明文件及其管理工具，如早期的tsd、后来的typings以及当前的@types。这些工具为TypeScript的智能提示和类型检查提供了坚实基础。

同样的机制也可应用于JavaScript，通过引入类型声明文件来提升VS Code中的代码智能提示体验。

关于VS Code在此方面的更多详细说明，可参考以下官方资源：

1、https://code.visualstudio.com/docs/languages/javascript

2、https://github.com/Microsoft/TypeScript/wiki/JavaScript-Language-Service-in-Visual-Studio

3、https://code.visualstudio.com/docs/editor/intellisense

安装@types类型定义文件

安装类型定义文件

当前，无需依赖旧的typings工具，可直接通过npm安装所需的@types类型定义文件。

例如，若需安装sequelize的类型定义，可直接执行以下命令：

npm install @types/sequelize --save-dev

安装完成后，在node_modules目录下会出现@types目录，其中包含所有已安装的类型声明文件。

若某些第三方npm包官方未提供类型声明文件，安装时可能会报错提示找不到相应包。此时，将无法利用该包增强JavaScript代码的智能提示功能。

若熟悉TypeScript中*.d.ts文件的编写方法，也可手动创建相应的类型定义文件。

配置jsconfig.json启用类型感知

配置jsconfig.json文件

关于jsconfig.json文件的详细说明，请参阅相关文档。

在jsconfig.json文件中添加以下配置：

"include": [
 "model/**",
 "service/**"
],
"typeAcquisition": {
 "include": [
  "sequelize"
 ]
}

其中，typeAcquisition参数为必配项，用于启用类型感知功能；其内部的include参数指定对哪些包启用类型获取。

上述include配置并非强制要求，仅用于标识jsconfig.json文件对哪些文件生效。

配置生效后，界面表现如图：

上图中示例展示的是sequelize包中Model类的实例方法和属性提示。

VS Code对智能感知图标也进行了汇总说明：

在JavaScript中启用语义检查

在JavaScript文件中启用语义检查

若需在JavaScript中启用类型检查，可在文件顶部添加// @ts-check注释。

// @ts-check
let easy = 'abc'
easy = 123 // Error: Type '123' is not assignable to type 'string'

或者在jsconfig.json中进行如下配置：

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

详情请参阅官方文档

总结

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对本站的支持。