js函数提示 vscode_几个 JS 编程细节让你的 VSCode 更高产

这篇文章不打算讲很玄很高深莫测的东西，我想网络上这类知识已经层出不穷了，没什么必要重复。只是最近跟人谈到 VSCode 编辑器对 JavaScript 语言支持的问题，想在此分享一些自己的使用经验。

毋庸置疑的，VSCode 编辑器是近两年来的新起之秀，并且迅速取代 Atom、SublimeText 和 WebStorm 这些传统编辑器(IDE)成为目前最受欢迎的轻量级 IDE，虽说这背后自然少不了微软这个大 Boss 的推动，但另一个层面上，它也确实提供了其他编辑器所无法匹敌的功能和便捷性。

VSCode 第一个考虑的语言是 TypeScript，对其支持是最好的，当然这因为它在微软现在的战略体系中占据着重要的位置，同时本身也是编写 VSCode 编辑器的语言。除了 TypeScript，向下 VSCode 支持 JavaScript，并在其推动下为 JavaScript 的开发补充了众多的新特性，包括更全面更完善的 JSDoc 支持，自动类型检测等，这篇文章，我将着重介绍这两个方面，看我们在开发的过程中如何使用它们来使开发更快速、更准确。

第一个要讲的是自动类型推断。如果已经学习了 TypeScript (或其他强类型语言)的用户，对这个概念会比较熟悉，但对于纯粹的 JavaScript，这个名词就提得比较少了，实际上，JavaScript 在编辑器中也是支持支持自动类型推断的，至少在 VSCode 中是这样，我相信大多数 JavaScript 开发者已经体验到了。

所谓的自动类型推断，就是在定义变量的时候，通过赋予默认值，编辑器(或编译器)能够通过这个默认值来推断出变量的类型。言简易赅，关键字：定义变量，默认值。一旦编辑器知道了变量的类型，它就能够在我们使用变量的时候给出智能提示，例如提示属性和方法，这是最常用的功能，也是编辑器最棒的地方。

那么应该怎么给变量赋默认值呢，我想这个问题大多数开发者都能够耳熟能详了，但我还是决定在这里罗嗦一下。在学习 Java 的时候我们知道如果一个 string 类型的变量，默认值是一个空字符串，JavaScript 中也应该这样，虽然我们编写 JavaScript 不要求强制定义类型，但既然是赋默认值，那么这些规则还是要被遵守的。即 string 类型的变量，默认值设置为空字符串；空 number 类型的变量，默认值设置为 0, -1 或者 NaN；boolean 类型默认为 false；等等，总之就是默认值应该是 falsy 的(-1例外)。

除了 string, number 等这些简单类型(或者叫原始类型)，像 object 和 array 这些复合类型，恩，array 在这一节里没什么好说的，你只能设置为一个空的数组，编辑器也无法得知数组中的元素是什么具体类型的。但 object 则可以更详细。在 VScode 中，对 object 类型支持相当的好，类似变量，你可以给属性设置对应的默认值，以便获取编辑器的智能提示支持。另外，通常地，我们可能会遇到对象具有可选属性的情况，这时候可以将其默认值设置为 undefined，虽然这不能使编辑器得知它的类型，但还是可以在我们需要使用这个属性的时候，VSCode 能拿自动提示它。

接下来要讲的是 JSDoc，VSCode 对 JSDoc 的进步来说可谓功不可没。VSCode 本来只对 TypeScript 语言提供复杂的类型系统支持，但出于目前纯粹 JavaScript 开发还是处于很广泛的情况，VSCode 允许开发者通过 JSDoc 来获取大部分的 TypeScript 类型系统支持。它是怎么做的呢？

我们知道数据类型出现在变量、函数、属性和方法上，为此，VSCode 特别支持使用 JSDoc 在这些对象上标注类型，下面这张图片简要地说明了这一点：

通过这些“注解”，编辑器就能够很好的理解数据的类型，并在调用的时候给出专门的智能提示，非常方便。当然，这个图只是简单地介绍 JSDdoc 的这个特性，VSCode 编辑器支持的远远要比这些多得多，下面我再给一些复合类型的例子以供参考，但需要明白，我是没有办法在这里列出所有 VSCode 支持的类型结构的，这得自己去发掘了。

/** @type { {name: string, getAge: () => number, height?: number} } */

var person = {};

class User {

/*** @param {string} name*/

constructor(name) {

this.name = name; // this.name 会通过自动类型推断得出它为 string 类型 /** @type {number} */

this.age;

}

/** @returns {number} */

getAge() {

return this.age || 20;

}

}

var user = new User("Ayon");

/** @type {User} */

var user2;

user2 = new User("John");

// ...

除了简单类型需要注解或者通过默认值进行自动类型推断外，对于复合类型，即类、实例这些，编辑器都能够根据定义来自动获取类型，在调用时自动提示属性和方法，除了那些没有默认值的属性(如上面的 this.age 属性)，则可以使用 JSDoc 来手动标记类型。

另外需要注意的是，VSCode 为 JavaScript 使用的也是 TypeScript 的类型系统，因此简单类型和复合类型是有区别的，例如 string 和 String 是完全不同的类型，这个熟悉 JavaScript 的人应该已经了解了。同时我也建议纯 JavaScript 开发者，在使用 VSCode 这一套 JSDoc 类型注解系统的时候，为了使注解更详细准确，最好还是去学习一下 TypeScript。

这篇文章也同样对熟悉 TypeScript 的读者有用，如果你主要使用 TypeScript 开发，那么应该很熟悉 TypeScript 的类型注解，而当你在编写纯 JavaScript 代码的时候，则可以知道大多数你可以在 TypeScript 中使用的类型注解方式，也可以通过 JSDoc 在 JavaScript 中使用(除了 namespace, inerface 这些 TypeScript 专有关键字定义的类型)。

最后一个提示，当你某个函数(或方法)的返回值是一个包含比较多属性的对象的时候，如果在 JSDoc 中标注返回值类型，可能会是很长的一串结构，并不怎么方便，这时候则可以在函数中定义一个对象，为这个对象的属性设置默认值，并将少量的可选属性设置为 undefined 同时用 JSDoc 标注类型，然后在函数的末尾返回这个对象，这样编辑器也能自动推断出函数的返回值类型就是这个对象的类型。

(注：这篇文章以 JavaScript 为例，但经我自己实验，其他弱类型语言如 Python 也支持大部分上面提到的特性。)