如何为你的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 相关文章推荐
js取消单选按钮选中示例代码
Nov 14 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
js正则表达式简单校验方法
Jan 03 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随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
phpinfo的知识点总结
2019/10/10 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python切片操作深入详解
2018/07/27 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
django 实现简单的插入视频
2020/04/07 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
《将心比心》教学反思
2014/04/08 职场文书
学生安全责任书模板
2014/07/25 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
父母教会我观后感
2015/06/17 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
JavaScript前端面试组合函数
2022/06/21 Javascript