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;
可以在第一行上使用
object
或Object
。
实验要求
经测试,在 VSCode
和 IDEA
下可以直接使用ts-check
的类型检测,sublime
等编辑器不可以,应该是要下载对应的插件才可以。
写在最后
对于老项目,使用 // @ts-check
和 JSDoc
来来享受TypeScript类型系统的好处是最简单、学习成本最低的方法。
而对于新项目,则更加推荐直接使用 TypeScript 来进行代码编写,并且各大框架里面都是用的TypeScript进行的代码编写,在可期的未来,TypeScript将会越来越受欢迎。
JS的静态类型检测,有内味儿了的更多相关文章
- 【JS】类型检测
本文首发于我的个人博客 : http://cherryblog.site/ 前言 js 中的类型检测也是很重要的一部分,所以说这篇文章我们就来讲一下怎么对 JavaScript 中的基本数据类型进行检 ...
- JS中 typeof,instanceof类型检测方式
在js中的类型检测目前我所知道的是三种方式,分别有它们的应用场景: 1.typeof:主要用于检测基本类型. typeof undefined;//=> undefined typeof 'a' ...
- JS中类型检测方式
在js中的类型检测目前我所知道的是三种方式,分别有它们的应用场景: 1.typeof:主要用于检测基本类型. typeof undefined;//=> undefined typeof 'a' ...
- JS做类型检测到底有几种方法?看完本文就知道了!
JS有很多数据类型,对于不同数据类型的识别和相互转换也是面试中的一个常考点,本文主要讲的就是类型转换和类型检测. 数据类型 JS中的数据类型主要分为两大类:原始类型(值类型)和引用类型.常见的数据类型 ...
- JS 类型检测
typeof 适合函数对象和基本类型的判断 typeof 100instanceof 适合判断对象类型 obj instanceof Object 基于原型链判断操作符,若做操作符不是对象,则会直接返 ...
- boost学习 内嵌类型检测 与 any 的代码练习
本文是学习 boost源码的一些练习 参考文章来自 刘未鹏 C++的罗浮宫(http://blog.csdn.net/pongba) 目录 http://blog.csdn.net/pongba/ar ...
- js安全类型检测
背景: 都知道js内置的类型检测,大多数情况下是不太可靠的,例如: typeof . instanceof typeof 返回一个未经计算的操作数的类型, 可以发现所有对象都是返回object ...
- JS数组类型检测
在强类型语言,数组类型检测是非常容易的事情(typeof就可以解决),而在弱语言JS数据类型就很容易混淆了. JS中常见的数据类型有:number.string.boolean.undefined.f ...
- flow 静态类型检查 js
1.flow介绍 https://ustbhuangyi.github.io/vue-analysis/prepare/flow.html#为什么用-flow 2.使用 (1)安装flow (2)项目 ...
随机推荐
- P3084 [USACO13OPEN]照片(差分约束)
(已经有了简化版题面) 又秒了一次dp233 本来按照感觉瞎写了一发... 但还是老老实实列式子吧.... 对差分约束有了更深的理解 #include<cstdio> #include&l ...
- jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...
- jmeter-利用While Controller控制器实现接口报错时的重试机制
预期功能:在jmter脚本报错的时候重试,最多重试5次 1.添加While Controller 2.添加请求 3.添加断言,在断言不符合预期的时候加上代码:vars.put("status ...
- 通俗地说逻辑回归【Logistic regression】算法(二)sklearn逻辑回归实战
前情提要: 通俗地说逻辑回归[Logistic regression]算法(一) 逻辑回归模型原理介绍 上一篇主要介绍了逻辑回归中,相对理论化的知识,这次主要是对上篇做一点点补充,以及介绍sklear ...
- [UWP]使用CompositionAPI的翻转动画
1. 运行效果 在 使用GetAlphaMask和ContainerVisual制作长阴影(Long Shadow) 这篇文章里我介绍了一个包含长阴影的番茄钟,这个番茄钟在状态切换时用到了翻转动画,效 ...
- MQ应用之解耦
简介 消息队列 MQ 既可为分布式应用系统提供异步解耦和削峰填谷的能力,同时也具备互联网应用所需的海量消息堆积.高吞吐.可靠重试等特性. 应用场景 削峰填谷:诸如秒杀.抢红包.企业开门红等大型活动时皆 ...
- Java程序线上故障排查
目录 一.Linux 内存和cpu 网络 磁盘 /proc文件系统 二.JVM Java堆和垃圾收集器 gc日志分析 JVMTI介绍 Attach机制 java自带工具 三.三方工具 jprofile ...
- C++总结(1)keywords to the class
目录 Chapter 1.关于类的关键字 1. class,struct与union 2.private,public与protected 3.friend 4.virtual 5.const 6.i ...
- 03-MyBatis拦截器机制
目录 MyBatis拦截器介绍 拦截器的使用 拦截器介绍及配置 源码分析 总结 本文转载自MyBatis拦截器原理探究 MyBatis拦截器介绍 MyBatis提供了一种插件(plugin)的功能,虽 ...
- nyoj 290 动物统计加强版 (字典树 (Trie) PS:map<TLE>)
动物统计加强版 时间限制:3000 ms | 内存限制:150000 KB 难度:4 描述 在美丽大兴安岭原始森林中存在数量繁多的物种,在勘察员带来的各种动物资料中有未统计数量的原始动物的名单 ...