JavaScript和TypeScript中的void的具体使用

如果你来自传统的强类型语言，可能会很熟悉 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 很好的相处。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript:void(0)点击登录没反应怎么解决

    javascript:void(0)点击登录没反应怎么解决

    巧用批处理解决IE不支持JavaScript等问题 rem =====批处理开始======== regsvr32 actxprxy.dll regsvr32 shdocvw.dll Regsvr32 URLMON.DLL Regsvr32 actxprxy.dll Regsvr32 shdocvw.dll regsvr32 oleaut32.dll rundll32.exe advpack.dll /DelNodeRunDLL32 C:\WINNT\System32\dacui.dll run

  • javascript:void(0)的真正含义实例分析

    大家看JavaScript脚本经常可以看到这样的代码: 〈a href="javascript:doTest2();void(0);"〉here〈/a〉 但这儿的void(0)究竟是何含义呢? JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. void 操作符用法格式如下: 1. javascript:void (expression) 2. javascript:void expression expression 是一个要计算的 JavaScr

  • javascript void(0)的妙用

    void 操作符用法格式如下: 1. javascript:void (expression) 2. javascript:void expression expression是一个要计算的 JavaScript 标准的表达式.表达式外侧的圆括号是可选的,但是写上去是一个好习惯.我们可以使用 void 操作符指定超级链接.表达式会被计算但是不会在当前文档处装入任何内容.面的代码创建了一个超级链接,当用户点击以后不会发生任何事.当用户点击链接时,void(0) 计算为 0,但在 JavaScrip

  • javascript:void(0)的作用示例介绍

    在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,或者是跳到设置的锚点的地方,用户体验不好. 通常的用法为: 复制代码 代码如下: <a href="javascript:void(0)">单击此处看看效果</a> 实际上单击此处什么也不会发生,其中的javascript:void(0);形式是一个javasc

  • javascript:;与javascript:void(0)使用介绍

    最近看了好几个关于<a>标签和javascript:void(0)的帖子,谨记于此,以资查阅. 注:以下代码未经全面测试,但每一种方法可能会出现的情况都基本做了说明. 在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好. 目前有如下几种解决办法: 1)点击链接后不做任何事情 <a href="javascript:

  • javascript:void(0)是什么意思示例介绍

    Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. void 操作符用法格式如下: 1. javascript:void (expression) 2. javascript:void expression expression 是一个要计算的 Javascript 标准的表达式.表达式外侧的圆括号是选的,但是写上去是一个好习惯. (实现版本 Navigator 3.0 ) 你以使用 void 操作符指定超级链接.表达式会被计算但是不会当前文档处装入任何内容.

  • JavaScript和TypeScript中的void的具体使用

    如果你来自传统的强类型语言,可能会很熟悉 void 的概念:一种类型,告诉你函数和方法在调用时不返回任何内容. void 作为运算符存在于 JavaScript 中,而作为基本类型存在于 TypeScript 中.在这两个世界中,void 的工作机制与大多数人习惯的有点不同. JavaScript 中的 void JavaScript 中的 void 是一个运算符,用于计算它旁边的表达式.无论评估哪个表达式,void总是返回undefined. let i = void 2; // i ===

  • 深入理解JavaScript和TypeScript中的class

    前言 对于一个前端开发者来说,很少用到 class ,因为在 JavaScript 中更多的是 函数式 编程,抬手就是一个 function,几乎不见 class 或 new 的踪影.所以 设计模式 也是大多数前端开发者的一个短板. 最近在学习 Angular的过程中发现其大量的运用了 class,不得不佩服,Angular 确实是一个优秀的.值得深入研究的 框架. 本文将简单的介绍一下 JavaScript 和 TypeScript 中的 class. 基本概念 在介绍 class 之前,要先

  • JavaScript/TypeScript中==和===的区别详解

    JavaScript/TypeScript中==和===的区别详解

    在JS/TS项目里,除了能看到==操作符来判断两个变量是否相等外,我们还会看到===操作符,这两者有什么区别吗? 先上结论, 对于String, number这些基础类型,==操作符会先把两边的变量进行类型强制转换成相同的类型再比较是否相等:===操作符则不会进行类型转换,而是直接进行比较. 对于array, object这些高级类型,==和 ===是没有区别的,因为它们比较的是 “指针地址” . 对于基础类型和高级类型,== 和 ===是有区别的:==操作符会先把高级类型转换为基础类型之后,进

  • Javascript技术栈中的四种依赖注入小结

    作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道经久不衰.比如在J2EE中,就有大名鼎鼎的执牛耳者Spring.Javascript社区中自然也不乏一些积极的尝试,广为人知的AngularJS很大程度上就是基于DI实现的.遗憾的是,作为一款缺少反射机制.不支持Annotation语法的动态语言,Javascript长期以来都没有属于自己的Spri

  • TypeScript 中接口详解

    在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念. 先看看一个简单的例子: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } var myObj = { size: 10, label: "Size 10 Object" }; printLabel

  • Javascript技术栈中的四种依赖注入详解

    Javascript技术栈中的四种依赖注入详解

    作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道经久不衰.比如在J2EE中,就有大名鼎鼎的执牛耳者Spring.Javascript社区中自然也不乏一些积极的尝试,广为人知的AngularJS很大程度上就是基于DI实现的.遗憾的是,作为一款缺少反射机制.不支持Annotation语法的动态语言,Javascript长期以来都没有属于自己的Spri

  • TypeScript中正确使用interface和type的方法实例

    目录 前言 interface type 附:interface和type不同点 总结 前言 interface 和 type 都是用来定义类型,可以理解定义 shape ,那么 shape 表示一种设计大框,或者说只要具有某些特征或者行为就是为一类事物.在有些面向例如 Java 语言中,interface 用于定义行为,如果一个类实现了某一个 interface 表示该类具有某种行为或者说具有某种能力,例如writable 或者 readable .可以通过行为来对事物进行划分.interfa

  • TypeScript中的函数

    目录 1.函数定义 1.1JavaScript中的函数 1.2TypeScript中的函数 3.可选参数和默认参数 4.剩余参数 1.函数定义 1.1JavaScript中的函数 在学习TypeScript中的函数前我们先来回顾一下JavaScript中的函数定义常用的包含以下几种: 第一种:使用function关键字声明函数 function add1 (x, y) { return x + y } 第二种:使用字面量方式声明函数 const add2 = function (x, y) {

  • TypeScript中的类

    目录 1.概述 2.定义一个简单的类 3.继承 4.public.private.protected修饰符 4.1getters与setters 5.readonly修饰符 6.静态成员 7.抽象类 8.类与接口 1.概述 类这个概念基本是所有面向对象编程语言都具有一个概念,例如Java.Python等:在JavaScript中ES6 之前是没有类这个概念的,对于熟悉面向对象来程序猿来说有些棘手,因为他们用的都是基于类的继承,对象也是通过类创建出来的.在ES6中添加了类这个概念,虽然只是一个语法

  • typescript中type和interface的区别有哪些

    目录 前言 type和interface的相同点 type和interface的不同点 结语 如何选择 Interface . Type 总结 前言 在typescript里面,有两个概念十分容易混淆,那便是 type 和 interface,它俩都可以用来表示 接口,但是实际使用上会存在一些差异,因此本篇文章就准备聊聊它俩,彻底弄清它俩的联系与区别,废话不多说,开搞! type和interface的相同点 在我看来,它俩就是对 接口定义 的两种不同形式,目的都是一样的,都是用来定义 对象 或者

随机推荐