如何为您的JS项目添加智能提示和类型检查细�

前言

最近在做项目代码重构，其中一个需求就是在代码中加入智能提示和类型检查。智能提示，英文为IntelliSense，可以为开发人员提供智能补码、暂停提示、跳转定义等功能，帮助他们正确快速地完成编码。说起来，JavaScript作为一种动态弱类型的解释语言，可以在变量声明后改变类型，并且类型只能在运行时确定，因此很容易产生大量只能在代码运行时才能发现的错误。与Java等静态类型语言相比，开发体验确实差了一点。更烦人的是，智能提示依赖静态类型检查，所以在过去，几乎不可能指望JavaScript的智能提示能赶上Java。当然，时代在进步，TypeScript已经存在了很长时间，为JavaScript带来了静态类型检查和许多其他功能。对于JavaScript的智能提示也有一个解决方案。经过一段时间的研究，VSCode编辑器被用作开发工具，介绍如何向JavaScript添加智能提示和类型检查。

基于JSDoc的

JSDoc是目前最常见的JavaScript API文档生成器，根据其语法编写代码注释自动生成文档非常方便。因为JSDoc可以提供详细的类型信息，所以也被VSCode等编辑器接受，应用于智能提示。例如，您可以使用@type标记为部分声明的对象赋予特殊类型：

/** * @type {{a:布尔值，b:布尔值，c:数字} } */var x={ a : true }；x.b=假；x .//-由于类型声明，将提示“x”包含属性a、b和cJSDoc。最常见的用法是声明函数参数的类型，并使用@param完成：

/* * * @ param { string } param 1-这可以用来解释参数含义*/function foo (param1) {this。prop=param1//param1(和this.prop)都是字符串类型。}在代码中加入JSDoc注释，让阅读和理解代码变得更加方便(代码交出来的时候不用抓狂，当然前提是注释写得好)，同时也保证了开发体验，减少了很多只能在运行时发现的数据类型的bug。VSCode基本上支持JSDoc的通用语法。具体使用请参见JavaScript中的JSDoc支持。

基于类型脚本类型声明文件

除了使用JSDoc提前声明类型，更激进的做法是直接使用微软开发的TypeScript，为整个项目带来完美的静态类型检查。当然，对于老项目来说，改造的成本是巨大的(使用Flow也差不多，需要移动太多代码，而且Flow也没有完成)。但由于与TypeScript相同，VSCode可以直接读取前者的类型声明文件，为JavaScript提供智能提示(其实JavaScript的智能提示功能是基于TypeScript团队为VSCode提供的JavaScript语言服务开发的)。TypeScript的类型声明文件以结尾。d.ts，用于描述同名JavaScript文件的导出代码类型，功能与。C语言的头文件。严格来说，ts类型声明文件就像用TypeScript语法重写JSDoc注释，并将其提取到一个单独的文件中。VSCode是两者的融合。当您混合它们时，您可以在JSDoc注释中直接使用ts类型声明文件中定义的接口和类。直接用官方提供的示意图(图为Visual Studio，不过不疼):

对于自己的代码，可以编写相应的ts类型声明文件，对于引用的第三方库，社区也提供了解决方案：DefinitelyTyped提供第三方库的通用类型声明文件。VSCode中的许多第三方库都有内置的类型声明文件。如果您自己下载，可以直接使用npm:

# @types第三方库名npm i @types/express有关ts类型声明文件语法的信息，请参考官网介绍。

此外，在VSCode中，默认情况下不打开类型检查，这意味着即使您有详细的JSDoc注释或ts类型声明文件，您仍然可能会在数据类型上出错。打开方式是在项目根目录下添加jsconfig.json文件，设置‘checkJs’:为true，示例如下：

{ '编译器选项' : {'checkjs' : true}，//位于此目录中的文件不受静态检查和智能提示' exclude' : ['node _ modules '，' * */node _ modules/*]}摘要

最后，无论是老项目的改造，还是新项目的开发，很明显，以上方式中加入智能提示和类型检查，会稍微减缓开发速度。然而，与智能提示带来的开发体验、通过类型检查预先解决运行时可能发现的许多错误、方便地完成详细文档以及对代码重构的信心相比，这种速度牺牲是值得的。

好了，这就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。

参考文件：

Visual Studio代码中的JavaScript在Visual Studio中使用JavaScript JavaScript语言服务