专栏首页从零开始学 Web 前端JS的静态类型检测,有内味儿了

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

我们知道 TypeScript 2.3 以后的版本支持使用--checkJs.js文件进行类型检查和错误提示。 但是由于 JavaScript 是弱类型语言,在编写代码的时候,是无法检测变量的类型的。

因此每次运行代码类型报错的时候,我心中都会冒出来一个强烈的愿望:要是 JavaScript是强类型的多好!

好消息是,JSDoc 的 @ts-check,可以现实这个愿望。

立即上手

如果能有机会使用 TypeScript 那当然是最好,但是往往开发的老项目在早期都是 JavaScript 完成的,如果都迁移到 TypeScript 版本工作量是庞大的,而且不可避免出现许多bug问题,那么有没有一种方式可以无痛的在使用JavaScript的同时享受到TypeScript的类型检查呢?

答案就是 // @ts-check,在 js 文件的头部引入这样一行注释,然后配合JSDoc就可以在JavaScript代码中使用 TypeScript的类型检查了。

举个例子,在下图中我们首先声明了一个变量 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.<number>} */
var nds;
/** @type {Array<number>} */
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'
 * @property {string} prop1 - SpecialType 属性 prop1 是 string 类型
 * @property {number} prop2 - SpecialType 属性 prop2 是 number 类型
 * @property {number=} prop3 - SpecialType 属性 prop3 是可选的 number 类型
 * @prop {number} [prop4] - SpecialType 属性 prop4 是可选的 number 类型
 * @prop {number} [prop5=42] - SpecialType 属性 prop5 是可选的 number 类型(默认值 42))
 */
/** @type {SpecialType} */
let specialTypeObject;

可以在第一行上使用objectObject

实验要求

经测试,在 VSCodeIDEA下可以直接使用ts-check 的类型检测,sublime等编辑器不可以,应该是要下载对应的插件才可以。

写在最后

对于老项目,使用 // @ts-checkJSDoc 来来享受TypeScript类型系统的好处是最简单、学习成本最低的方法。

而对于新项目,则更加推荐直接使用 TypeScript 来进行代码编写,并且各大框架里面都是用的TypeScript进行的代码编写,在可期的未来,TypeScript将会越来越受欢迎。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 嵌入式面试题(一)

    4. 空指针(null pointer)指向了内存的什么地方(空指针的内部实现)?

    Daotin
  • 从零开始学 Web 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性

    high:被界定为高的值的范围。 low:被界定为低的值的范围。 max:规定范围的最大值。 min:规定范围的最小值。 optimum: 规定度量的最...

    Daotin
  • PCI配置空间简介

    现在有个难题——CF8h、CFCh端口是32位端口,可像Turbo C之类的16位C语言编译器都不支持32位端口访问。怎么办?我们可以使用**_ _ emit ...

    Daotin
  • TypeScript 疑难杂症

    作者:阿伟 - 身在高楼心在北大荒,我就这副死样~https://zhuanlan.zhihu.com/p/82459341

    ConardLi
  • typescript叫anyscript?不存在的

    强烈建议使用vscode,因为都是同一家,对ts的支持和开发体验是非常棒的,大大增加了开发效率和质量,避免各种错误。

    lhyt
  • dotnet检测类型是否为泛型

    private static string GetTableName(Type type) { //检测类型是否为泛型...

    hbbliyong
  • ASP.NET SignalR2持久连接层解析

        越是到年底越是感觉浑身无力,看着啥也不想动,只期盼着年终奖的到来以此来给自己打一针强心剂。估摸着大多数人都跟我一样犯着这样浑身无力的病,感觉今年算是没挣...

    彭泽0902
  • JAVA实例化泛型

    DH镔
  • tp5集成ElasticSearch

    mappings有点类似我们定义 MySQL的 数据库表结构的时候,需要指定每个字段的名字,其数据类型一样。当然,这个定义过程,也指明了这个表结构一共含有多少个...

    php007
  • Go语言中反射的正确使用

    介绍 反射是元数据编程的一种形式,指的是程序获得本身结构的一种能力。不同语言的反射模型实现不一样,本文中的反射,仅仅指的是Go语言中的反射模型。 反射有两个问题...

    李海彬

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动