如何为你的JS项目添加智能提示与类型检查详解


Posted in Javascript onMarch 12, 2019

前言

最近在做项目代码重构,其中有一个要求是为代码添加智能提示和类型检查。智能提示,英文为 IntelliSense,能为开发者提供代码智能补全、悬浮提示、跳转定义等功能,帮助其正确并且快速完成编码。说起来,JavaScript 作为一门动态弱类型解释型语言,变量声明后可以更改类型,并且类型在运行时才能确定,由此容易产生大量代码运行中才能发现的错误,相比 Java 等静态类型语言,开发体验上确实差了一截。更烦躁的是,智能提示就是依赖于静态类型检查的,所以在以前,指望 JavaScript 的智能提示完善度追上 Java 基本不可能。当然,时代在进步,TypeScript 已经问世许久,为 JavaScript 带来了静态类型检查以及其他诸多特性。JavaScript 的智能提示也已有了解决方案。调研了一段时间后,下文以 VSCode 编辑器作为开发工具,介绍一下如何为 JavaScript 加上智能提示以及类型检查。

基于 JSDoc

JSDoc 是目前最通用的 JavaScript API 文档生成器,根据其语法编写代码注释,可以十分方便地自动生成文档。由于 JSDoc 能提供详细的类型信息,其也被 VSCode 等编辑器接受应用于智能提示。例如,可以使用 @type 标签来赋予部分声明的 object 一个特殊类型:

/**
 * @type {{a: boolean, b: boolean, c: number}}
 */
var x = {a: true};
x.b = false;
x. // <- 由于 type 声明,"x" 将被提示含有属性 a,b 以及 c

JSDoc 最常见的使用是为函数的参数声明类型,使用 @param 来完成:

/**
 * @param {string} param1 - 这里可以用于解释参数含义
 */
function Foo(param1) {
 this.prop = param1; // param1 (以及 this.prop)均为 string 类型
}

为代码添加 JSDoc 注释使得阅读和理解代码更加方便(代码交接时再也不用抓狂了,当然前提是注释写得好),也保障了开发时的体验并且降低了很多运行时才能发现的数据类型方面的 bug。VSCode 基本支持 JSDoc 的常见语法,具体使用可参见JSDoc support in JavaScript。

基于 TypeScript 类型声明文件

除了使用 JSDoc 提前声明类型,更为激进的做法是直接使用微软开发的 TypeScript,为整个项目带来完善的静态类型检查。当然,对于老项目来说,改造的成本较为巨大(使用 Flow 也类似,要动的代码太多,况且 Flow 烂尾了)。不过由于和 TypeScript 师出同门,VSCode 能够直接读取前者的类型声明文件,来为 JavaScript 提供智能提示(实际上 JavaScript 的智能提示功能就是基于 TypeScript 团队为 VSCode 提供的 JavaScript 语言服务开发的)。 TypeScript 的类型声明文件以 .d.ts 为后缀,用于描述同名的 JavaScript 文件导出代码的类型,功能上类似于 C 语言的 .h 头文件。不严格地来说,ts 类型声明文件就像用 TypeScript 语法将 JSDoc 的注释重写了一遍并提取到了单独的文件中。VSCode 更是将二者作了融合,当你二者混用的时候,可以直接在 JSDoc 的注释中直接使用 ts 类型声明文件中定义的 interface 和 class 等。直接使用官方提供的示意图(图中是 Visual Studio,不过无伤大雅):

如何为你的JS项目添加智能提示与类型检查详解

对于自己的代码,可以编写对应的 ts 类型声明文件,而对于引用的第三方库,社区同样提供了解决方案:DefinitelyTyped 提供了常见的第三方库的类型声明文件。VSCode 有很多第三方库已经内置类型声明文件,自己下载的话直接使用 npm 即可:

# @types + 第三方库名称
npm i @types/express

关于 ts 类型声明文件的语法等相关信息,参见官网介绍。

另外,在 VSCode 中,类型检查并非默认开启,这意味着即使你有详尽的 JSDoc 注释或 ts 类型声明文件,依然可能在数据类型上栽跟头。开启方式为在项目根目录下添加 jsconfig.json 文件,并设置 "checkJs": true,示例如下:

{
 "compilerOptions": {
  "checkJs": true
 },
 
 // 位于此目录下的文件不进行静态检查和智能提示
 "exclude": [
  "node_modules",
  "**/node_modules/*"
 ]
}

总结

最后,无论是对老项目的改造或是新项目的开发,使用以上的方式添加智能提示和类型检查显而易见会略微拖慢开发速度,但我们认为,与智能提示带来的开发体验、将很多可能在运行时才能发现的错误通过类型检查前置解决、顺手完成的详细文档以及重构代码时的信心相比,这点速度的牺牲是值得的。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

参考文档:

  • JavaScript in Visual Studio Code
  • Working with JavaScript
  • JavaScript Language Service in Visual Studio
Javascript 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
vue ssr 指南详读
Jun 29 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 #Javascript
通过JS运行机制的角度说说作用域
Mar 12 #Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
如何使用pm2快速将项目部署到远程服务器
Mar 12 #Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 #Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 #Javascript
javascript中数组的常用算法深入分析
Mar 12 #Javascript
You might like
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
php 猴子摘桃的算法
2017/06/20 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
node实现定时发送邮件的示例代码
2017/08/26 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
js验证账户名是否重复
2020/05/26 Javascript
python类继承用法实例分析
2014/10/10 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python如何输出整数
2020/06/07 Python
python 如何引入协程和原理分析
2020/11/30 Python
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
两道JAVA笔试题
2016/09/14 面试题
优秀应届生推荐信
2013/11/09 职场文书
客服工作职责
2013/12/11 职场文书
李开复演讲稿
2014/05/24 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
浅析JavaScript中的变量提升
2022/06/01 Javascript