查看原文
其他

【第1741期】JavaScript和TypeScript中的void

CoyPan 前端早读课 2019-10-16

前言

现在ts抓紧看起来。今日早读文章由腾讯@CoyPan翻译授权分享。

@CoyPan,一名符合预期的前端工程师

正文从这开始~~

如果你是从传统的强类型语言转到JavaScript来的,那么你可能熟悉void的概念:一种类型,它告诉你函数和方法在调用时不返回任何内容。

void在JavaScript中作为运算符存在,在TypeScript中作为基本类型存在。在JS和TS中,void的用法和大多数人习惯的有所不同。

JavaScript中的void

JS中的void是一个运算符,它对紧跟其后的表达式求值。不管是什么表达式,void总是返回undefined。

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

为什么我们需要这么写?这是因为在早些时候,人们可以重写undefined,并且给它一个特定的值。void总是返回真正的undefined。

另外,void是一种调用立即执行函数的不错的方式。

  1. void function() {

  2. console.log('What')

  3. }()

可以避免污染全局命名空间:

  1. void function aRecursion(i) {

  2. if(i > 0) {

  3. console.log(i--)

  4. aRecursion(i)

  5. }

  6. }(3)


  7. console.log(typeof aRecursion) // undefined

由于void总是返回undefined,并且void总是会对表达式求值,所以有一个非常简单的方法,从函数返回而不返回值,但是仍然调用回调函数

  1. // returning something else than undefined would crash the app

  2. function middleware(nextCallback) {

  3. if(conditionApplies()) {

  4. return void nextCallback();

  5. }

  6. }

我认为,void最重要的用法:因为void总是返回undefined,他是你app安全的守护者。

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

TypeScript中的void

TypeScript中的void是undefined的子类型。JS中的函数总会有返回,要么是一个具体的值,要么是undefined.

  1. function iHaveNoReturnValue(i) {

  2. console.log(i)

  3. } // returns undefined

在JS中,如果没有具体的返回值的函数会返回undefined,并且void总是会返回undefined,TS中的void是y一个合适的类型,告诉开发人员此函数返回undefined:

  1. declare function iHaveNoReturnValue(i: number): void

void作为一个类型,也可以用在函数参数和其他的声明上。唯一可以传入的值是void:

  1. declare function iTakeNoParameters(x: void): void


  2. iTakeNoParameters() // 👍

  3. iTakeNoParameters(undefined) // 👍

  4. iTakeNoParameters(void 2) // 👍

void和undefined几乎是一样的。但是还是有一点不同,这个区别是十分重要的:

void作为返回类型可以用不同的类型替换,以允许高级回调模式:

  1. function doSomething(callback: () => void) {

  2. let c = callback() // at this position, callback always returns undefined

  3. //c is also of type undefiend

  4. }


  5. // this function returns a number

  6. function aNumberCallback(): number {

  7. return 2;

  8. }


  9. // works 👍 type safety is ensured in doSometing

  10. doSomething(aNumberCallback)

如果你想确保只能传入返回undefined的函数,调整你的回调函数类型:

  1. - function doSomething(callback: () => void) {

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


  3. function aNumberCallback(): number { return 2; }


  4. // 💥 types don't match

  5. doSomething(aNumberCallback)

现在,在大多数时候,你都可以很好的处理void了。

关于本文 译者:@CoyPan 译文:https://mp.weixin.qq.com/s/m6RMTGU3wlgDZgO2hF9g2A 作者:@ddprrt 原文:https://fettblog.eu/void-in-javascript-and-typescript/

他曾分享过

【第1705期】JavaScript中按位操作符的有趣应用

【第1563期】缓存最佳实践 & max-age的陷阱

为你推荐

【第1740期】揭开 JavaScript 引擎的面纱

【第1736期】现代 JavaScript 教程 - 代码风格

【第1708期】大规模应用 TypeScript

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存