Une note sur void en JavaScript et TypeScript

Si, avant de vous intéresser à JavaScript, vous avez écrit dans des langues traditionnelles avec une frappe forte, vous connaissez peut-être le concept de void . Il s'agit du type dont l'utilisation indique au programmeur que les fonctions et méthodes correspondantes ne renvoient rien lorsqu'elles sont appelées.



L'entité void est également disponible en JavaScript et TypeScript. Dans JS, il s'agit d'un opérateur. Dans TS, il s'agit d'un type de données primitif. Et ici et là, le void ne se comporte pas comme beaucoup de ceux qui sont void sur le void dans d'autres langues devraient s'y attendre.

Déclaration d'annulation de JavaScript

En JavaScript, l'opérateur void évalue l'expression qui lui est transmise. En même temps, quelle que soit l'expression à évaluer, void renvoie toujours undefined .

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

Pourquoi avons-nous besoin d'un tel opérateur?
Tout d'abord, il convient de noter que dans les premières années de la programmation JS, les développeurs pouvaient redéfinir undefined et y écrire une certaine valeur. Mais void renvoie toujours la vraie valeur de undefined .

Deuxièmement, l'utilisation de l'opérateur void est une façon intéressante de travailler avec des fonctions immédiatement appelées:

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

Et tout cela - sans pollution de l'espace de noms mondial:

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

Étant donné que l'opérateur void renvoie toujours undefined et évalue toujours l'expression qui lui est transmise, nous avons un moyen très expressif de revenir de la fonction sans renvoyer de valeur, mais avec un appel, par exemple, un rappel:

 //  -  undefined      function middleware(nextCallback) {  if(conditionApplies()) {    return void nextCallback();  } } 

Cela nous amène à la façon la plus importante d'utiliser void . Cet opérateur est une sorte d'application "poste de garde". Si une certaine fonction doit toujours retourner undefined , cela peut être réalisé en utilisant l'opérateur void .

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

Annuler le type de données dans TypeScript

Le type void dans TypeScript peut être appelé quelque chose comme l'opposé du type any . Les fonctions en JavaScript retournent toujours quelque chose. Il peut s'agir d'une valeur définie par le programmeur ou undefined :

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

Étant donné que les fonctions JavaScript, à partir desquelles rien n'est explicitement renvoyé, retournent toujours undefined , void dans TypeScript est le type approprié pour indiquer aux développeurs que la fonction renvoie undefined :

 declare function iHaveNoReturnValue(i: number): void 

L'entité void sous la forme d'un type peut également être utilisée pour les paramètres et pour toute autre déclaration de variable. La seule valeur qui peut toujours être transmise au paramètre void n'est undefined .

 declare function iTakeNoParameters(x: void): void iTakeNoParameters() //  iTakeNoParameters(undefined) //  iTakeNoParameters(void 2) //  

En conséquence, il s'avère que dans TS, les types void et undefined sont presque la même chose. Mais il y a une petite différence entre eux, qui, en fait, est extrêmement importante. Le type void renvoyé peut être remplacé par d'autres types, ce qui vous permet d'implémenter des modèles avancés pour travailler avec les rappels.

 function doSomething(callback: () => void) {  let c = callback() // callback   undefined  // c -  undefined } //     function aNumberCallback(): number {  return 2; } // ;    doSometing doSomething(aNumberCallback) 

Les développeurs s'attendent à ce que de telles conceptions, souvent utilisées dans les applications JS, fassent exactement cela. Voici le matériel sur ce sujet.

Si vous souhaitez qu'une fonction accepte uniquement les fonctions qui renvoient undefined , vous pouvez modifier la signature de la méthode en conséquence:

 //  // function doSomething(callback: () => void) { //  function doSomething(callback: () => undefined) { /* ... */ } function aNumberCallback(): number { return 2; } //  -    doSomething(aNumberCallback) 

Résumé

L'opérateur void en JavaScript et le type de données void en TypeScript sont des entités assez simples. L'éventail des situations dans lesquelles elles s'appliquent est limité. Cependant, il convient de noter que le programmeur qui les utilise, très probablement, ne rencontrera aucun problème lors de leur utilisation.

Chers lecteurs! Utilisez-vous void dans JS et TS?