如何为你的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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
Js中sort()方法的用法
Nov 04 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 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
探讨如何把session存入数据库
2013/06/07 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
js断点调试经验分享
2017/12/08 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python中格式化format()方法详解
2017/04/01 Python
python实现共轭梯度法
2019/07/03 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
解决c++调用python中文乱码问题
2020/07/29 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
管理站站长岗位职责
2013/11/27 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
实习单位鉴定评语
2014/04/26 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
员工开除通知书
2015/04/25 职场文书
暂停营业通知
2015/04/25 职场文书
刑事起诉书范文
2015/05/19 职场文书
2015年数学教研工作总结
2015/07/22 职场文书