JavaScript和TypeScript中的void的具体使用


Posted in Javascript onSeptember 12, 2019

如果你来自传统的强类型语言,可能会很熟悉 void 的概念:一种类型,告诉你函数和方法在调用时不返回任何内容。

void 作为运算符存在于 JavaScript 中,而作为基本类型存在于 TypeScript 中。在这两个世界中,void 的工作机制与大多数人习惯的有点不同。

JavaScript 中的 void

JavaScript 中的 void 是一个运算符,用于计算它旁边的表达式。无论评估哪个表达式,void总是返回undefined。

let i = void 2; // i === undefined

我们为什么需要这样的东西?首先在早期,人们能够覆盖 undefined 并给它一个实际值。 void 总是返回 real undefined。

其次,这是一种调用立即调用函数的好方法:

void function() {
 console.log('What')
}()

所有这些都没有污染全局命名空间:

void function aRecursion(i) {
 if(i > 0) {
  console.log(i--)
  aRecursion(i)
 }
}(3)

console.log(typeof aRecursion) // undefined

由于 void 总是返回 undefined,而 void 总是计算它旁边的表达式,你有一个非常简洁的方法从函数返回而不返回一个值,但仍然调用一个回调例如:

// returning something else than undefined would crash the app
function middleware(nextCallback) {
 if(conditionApplies()) {
  return void nextCallback();
 }
}

这让我想到了 void 最重要的通途:它是你程序的安全门。当你的函数总是应该返回 undefined 时,你可以确保始终如此。

button.onclick = () => void doSomething();

TypeScript 中的 void

TypeScript 中的 void 是 undefined 的子类型。 JavaScript 中的函数总是返回一些东西。要么它是一个值,要么是 undefined:

function iHaveNoReturnValue(i) {
 console.log(i)
} // returns undefined

因为没有返回值的函数总是返回 undefined,而 void 总是在 JavaScript 中返回 undefined,TypeScript 中的void 是一个正确的类型,告诉开发人员这个函数返回 undefined:

declare function iHaveNoReturnValue(i: number): void

void 作为类型也可以用于参数和所有其他声明。唯一可以传递的值是 undefined:

declare function iTakeNoParameters(x: void): void

iTakeNoParameters() // ?
iTakeNoParameters(undefined) // ?
iTakeNoParameters(void 2) // ?

所以 void 和 undefined 几乎是一样的。虽然有一点点不同,但这种差别很大:作为返回类型的 void 可以用不同的类型替换,以允许高级回调模式:

function doSomething(callback: () => void) {
 let c = callback() // at this position, callback always returns undefined
 //c is also of type undefiend
}

// this function returns a number
function aNumberCallback(): number {
 return 2;
}

// works ? type safety is ensured in doSometing
doSomething(aNumberCallback)

这是期望的行为,通常用于 JavaScript 程序。你可以在我的其他文章中阅读更多关于这种被称为 substitutability 的模式。

如果你想确保传递只返回 undefined 的函数(如“nothing”),请确保调整你的回调方法签名:

- function doSomething(callback: () => void) {
+ function doSomething(callback: () => undefined) { /* ... */ }

function aNumberCallback(): number { return 2; }

// ? types don't match
doSomething(aNumberCallback)

大概大部分时间你都能和 void 很好的相处。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
JS与框架页的操作代码
Jan 17 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 #Javascript
基于JavaScript 实现拖放功能
Sep 12 #Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 #Javascript
layui 对table中的数据进行转义的实例
Sep 12 #Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 #Javascript
小程序如何支持使用 async/await详解
Sep 12 #Javascript
layui清空,重置表单数据的实例
Sep 12 #Javascript
You might like
用PHP产生动态的影像图
2006/10/09 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
PHP5函数小全(分享)
2013/06/06 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
js版本A*寻路算法
2006/12/22 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python中使用支持向量机SVM实践
2017/12/27 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
教师开学感言
2014/02/14 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
公务员培的训心得体会
2014/09/01 职场文书
入团申请书格式
2019/06/20 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技