如何为你的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 相关文章推荐
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
js实现倒计时秒杀效果
Mar 25 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
php 设计模式之 工厂模式
2008/12/19 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python实现简易Web爬虫详解
2018/01/03 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python celery原理及运行流程解析
2020/06/13 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
清华大学自主招生自荐信
2014/01/29 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
主持人开场白台词
2015/05/29 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
vue+element ui实现锚点定位
2021/06/29 Vue.js