JS的静态类型检测，有内味儿了

举个例子，在下图中我们首先声明了一个变量 a，然后把数字 1 赋给了它，接着又把字符串 ‘1’ 赋给了它，看起来好像没有什么问题，而且运行起来也不会报错。

let a = 1;

a = ‘a’;

然后我们加上 // @ts-check 试试：

// @ts-check

/**

• @type {Number}

*/

let a = 1;

a = ‘1’;

神奇的一幕出现了，在变量a赋值的下面，出现了红色波浪线，鼠标放上去提示：

let a: number

@type — {Number}

不能将类型““1””分配给类型“number”。ts(2322)

也就是说我们将一个字符串赋值给了一个数字类型的变量是有问题的，这个时候我们未运行程序，但是编辑器已经帮我们分析出了代码可能存在的问题，这时候我们运行代码，是没有报错的。

因为这个类型检测只是让我们按照TypeScript的强类型语言检测类型问题，但是我们依然是JavaScript代码依然会按照JavaScript的代码逻辑运行，如是TypeScript代码的话，这里运行就会报错。

JSDoc 类型标记

---

既然ts-check这么好用，我们来看看 JSDoc 类型的注释支持哪些类型的检测。

根据官方文档，JSDoc现在支持下面几个类型检测：

• @type

• @param (or @arg or @argument)

• @returns (or @return)

• @typedef

• @callback

• @template

• @class (or @constructor)

• @this

• @extends (or @augments)

• @enum

下面我们选择常用的标记进行说明，更多更详细的标记可以参考官方文档。

@type

描述：用来声明变量的类型。

/**

• • string类型

• @type {string}

*/

let a1;

/**

• • windows对象类型

• @type {Window}

*/

let a2;

/**

• • string或者boolean类型

• @type {string | boolean}

*/

let sb;

// -------- 多种方式指定数组类型--------

/** @type {number[]} */

var ns;

/** @type {Array.} */

var nds;

/** @type {Array} */

var nas;

// ---- 还可以指定对象字面量类型。 例如，一个带有a（字符串）和b（数字）属性的对象—

/** @type {{ a: string, b: number }} */

var var9;

@param和@returns

描述：@param语法和@type相同，但增加了一个参数名。

/**

• 声明函数参数类型

• @param {string} p1 - p1 是 string 类型参数

• @param {string=} p2 - p2 是可选的 string 类型参数

• @param {string} [p3] - 另外一种可选参数写法

• @param {string} [p4=“test”] - p4 是可选的 string 类型参数（默认值为 “test”）

• @return {string} - 函数返回值是 string 类型

*/

function fn3(p1, p2, p3, p4){

// TODO

}

/**

• 用 “return” 说明函数的返回值类型

• @return {number}

*/

function fn1() {}

/**

• 可以像使用 “@return” 一样使用 “@returns”

• @returns {{a: string, b: number}}

*/

function fn2() {}

@typedef

描述：@typedef 可以用来声明复杂类型，和@param类似的语法。

/**

• 用 “@typedef” 自定义复杂类型

• @typedef {Object} SpecialType - 创建一个新的类型 ‘SpecialType’