Original address: https://fettblog.eu/void-in-j...

Original title: void in JavaScript and TypeScript

This article was first published on the Public Number: CoyPan in line with expectations

If you move from traditional strongly typed languages to JavaScript, you may be familiar with the concept of void: a type that tells you that functions and methods do not return anything when called.

Void exists as an operator in JavaScript and as a basic type in TypeScript. In JS and TS, void is used differently from most people's habits.

void in JavaScript

The void in JS is an operator that evaluates the following expression. Whatever the expression, void always returns undefined.

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

Why do we need to write that? This is because earlier, people could rewrite undefined and give it a specific value. void always returns true undefined.

In addition, void is a good way to call immediate execution functions.

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

It avoids polluting global namespaces:

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

console.log(typeof aRecursion) // undefined

Because void always returns undefined and void always evaluates expressions, there is a very simple way to return from functions without returning values, but still call callback functions:

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

I think the most important use of void is because void always returns undefined, and he is the guardian of your app security.

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

void in TypeScript

void in TypeScript is a subtype of undefined. Functions in JS always return, either a specific value or undefined.

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

In JS, if there is no specific return value function, undefined will be returned, and void always returns undefined. Void in TS is a suitable type of y, telling developers that this function returns undefined:

declare function iHaveNoReturnValue(i: number): void

As a type, void can also be used for function parameters and other declarations. The only value that can be passed in is void:

declare function iTakeNoParameters(x: void): void

iTakeNoParameters() // πŸ‘
iTakeNoParameters(undefined) // πŸ‘
iTakeNoParameters(void 2) // πŸ‘

void and undefined are almost the same. But there is still a difference, which is very important:

void as a return type can be replaced by different types to allow advanced callback modes:


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)

If you want to ensure that only undefined functions can be passed in, adjust your callback type:


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

function aNumberCallback(): number { return 2; }

// πŸ’₯ types don't match
doSomething(aNumberCallback)

Now, most of the time, you can handle void very well.