专栏首页FECoding为你的 JavaScript 项目添加智能提示和类型检查

为你的 JavaScript 项目添加智能提示和类型检查

前言

最近在做项目代码重构,其中有一个要求是为代码添加智能提示和类型检查。智能提示,英文为 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,不过无伤大雅):

对于自己的代码,可以编写对应的 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SOFARPC源码解析-搭建环境

    简介摘要 SOFA 是蚂蚁金服自主研发的金融级分布式中间件,包含构建金融级云原生架构所需的各个组件,包括微服务研发框架,RPC 框架,服务注册中心,分布式定时...

    爱撸猫的杰
  • Java的类加载器种类(双亲委派)

    1.启动类加载器:这个类加载器负责放在<JAVA_HOME>\lib目录中的,或者被-Xbootclasspath参数所指定的路径中的,并且是虚拟机识别的类库。...

    爱撸猫的杰
  • 大众美团服务链监控CAT

    CAT 作为服务端项目基础组件,提供了 Java, C/C++, Node.js, Python, Go 等多语言客户端,已经在美团点评的基础架构中间件框架(M...

    爱撸猫的杰
  • Java 的强引用、弱引用、软引用、虚引用

            强引用是使用最普遍的引用。如果一个对象具有强引用,那垃圾回收器绝不会回收它。如下:

    爱撸猫的杰
  • JAVA运行时数据区域

    根据《Java 虚拟机规范(Java SE 7版)》规定,Java虚拟机所管理的内存将会包括一下几个运行时数据区域:

    爱撸猫的杰
  • Java虚拟机详解----JVM内存结构

    http://www.cnblogs.com/smyhvae/p/4748392.htm

    爱撸猫的杰
  • 一段JAVA代码了解多线程,JUC、CAS原子性操作。

    1、保证变量在线程间可见,对volatile变量所有的写操作都能立即反应到其他线程中,换句话说,volatile变量在各个线程中是一致的(得益于java内存模型...

    爱撸猫的杰
  • 对象并不一定都是在堆上分配内存的

    关于JVM的内存结构及内存分配方式,不是本文的重点,这里只做简单回顾。以下是我们知道的一些常识:

    爱撸猫的杰
  • Java虚拟机详解02----JVM内存结构

    Java程序在运行时,需要在内存中的分配空间。为了提高运算效率,就对数据进行了不同空间的划分,因为每一片区域都有特定的处理数据方式和内存管理方式。

    爱撸猫的杰
  • Guava 源码分析(Cache 原理)

    我平时用的也挺频繁,这次就借助日常使用的 Cache 组件来看看 Google 大牛们是如何设计的。

    爱撸猫的杰

扫码关注云+社区

领取腾讯云代金券