IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Typescript 3.7.0 va prendre en charge l'opérateur de chaînage d'optionnels (?.)
En s'appuyant sur le 3e draft pour JavaScript

Le , par Patrick Ruiz

57PARTAGES

15  0 
Supposons, dans l’exemple qui suit, que l’on veuille extraire le nom de la cité au sein d’un enregistrement obtenu d’une API tierce :

Code TypeScript : Sélectionner tout
1
2
3
4
5
6
7
8
9
const apiResult = { 
  name: "Patrick elgato", 
  office: { 
    primary: { 
      city: "Lohove", 
      state: "South" 
    } 
  } 
}

L’une des solutions serait alors de procéder de la manière suivante :

Code TypeScript : Sélectionner tout
1
2
const city = apiResult.office.primary.city; 
// --> "Lohove"

L’approche est directe. Néanmoins, elle se base sur la dangereuse hypothèse que l’API renverra toujours la réponse sous la même forme lors de l’exécution. En effet, il suffit que l’API renvoie un profil utilisateur duquel la sous-structure office est manquante pour que des problèmes surviennent . Illustration avec le bout de code qui suit :

Code TypeScript : Sélectionner tout
1
2
3
4
const apiResult = { 
  name: "Patrick elgato" 
}const city = apiResult.office.primary.city; 
// --> Uncaught TypeError: Cannot read property 'primary' of null

De façon globale, le problème se pose avec les API qui ne dévoilent pas tous les types de réponses possibles. Une bonne approche à la résolution du problème consiste alors à considérer les propriétés au sein de ces structures comme optionnelles. C’est là qu’intervient l’opérateur dit de chaînage d’optionnels ( ?.) dont le fonctionnement est résumé ci-dessous :

/
Code TypeScript : Sélectionner tout
1
2
3
4
5
6
/  if `a` is `undefined` or `null`: 
//    return `undefined` 
//  else:  
//    return `a.b` 
a?.b;// The optional chaining operator is equivalent to: 
(a == null) ? undefined : a.b;

De façon brossée, l’opérateur de chaînage d’optionnels permet de parcourir des structures similaires à des arbres de façon élégante : si l’une des propriétés intermédiaires est null ou undefined, la chaîne entière est alors évaluée comme undefined. Application à l’exemple de la tentative d’extraction du nom de la cité au sein de l’enregistrement obtenu d’une API tierce :

Code TypeScript : Sélectionner tout
1
2
const city = apiResult?.office?.primary?.city; 
// --> string | undefined

Les développeurs habitués de langages de programmation comme C# de Microsoft ou Swift d’Apple connaissent cet opérateur puisque celui-ci est pris en charge par ces langages. À contrario, sa prise en charge continue de se faire attendre sous TypeScript, mais semble-t-il, plus pour longtemps d’après ce qui ressort des derniers développements.

En effet, le contenu de discussions en cours sur le GitHub de Microsoft laisse filtrer que TypeScript 3.7.0 est pressenti pour offrir la prise en charge de l’opérateur de chaînage d’optionnels. TypeScript 3.6.0 est disponible en bêta depuis peu et la version finale est prévue pour la fin du mois en cours. TypeScript 3.7.0 devrait être disponible au mois d’octobre si l’on prend en compte le fait que de nouvelles versions du langage de programmation libre et open source sortent approximativement tous les deux mois.

La décision de l’équipe TypeScript fait suite à la publication du troisième brouillon ECMAscript relatif à la prise en charge de l’opérateur de chaînage d’optionnels. Ce dernier permet grosso modo d’entrevoir les axes retenus du côté de Microsoft. La fenêtre de code dans la suite dresse une liste de cas de figures de base auxquels les développeurs pourront faire face sous TypeScript 3.7.0 :

Code TypeScript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
a?.b                 // undefined si `a` est null/undefined, sinon `a.b`. 
a == null ? undefined : a.b 
  
a?.[x]                 // undefined si `a`est null/undefined, sinon `a[x]`. 
a == null ? undefined : a[x] 
  
a?.b()                        // undefined si `a` est null/undefined 
a == null ? undefined : a.b() // génère une erreur de type si `a.b` n’est pas une fonction 
                              // sinon, évaluation de `a.b()` 
  
a?.()                        // undefined si `a` est null/undefined 
a == null ? undefined : a()  // génère une erreur de type si `a` n’est ni null/undefined, ni une fonction 
                             // sinon appelle la fonction `a`

Le draft laisse également filtrer que TypeScript 3.7.0 arrive avec l’opérateur ?? (nullish coalescing) complémentaire de celui de chaînage d’optionnels. Illustration avec le bout de code dans la suite :

Code TypeScript : Sélectionner tout
1
2
3
4
// falls back to a default value when response.settings is missing or nullish 
// (response.settings == null) or when response.settings.animationDuration is missing 
// or nullish (response.settings.animationDuration == null) 
const animationDuration = response.settings?.animationDuration ?? 300;

La publication d’un troisième brouillon ECMAscript relatif à la prise en charge de l’opérateur de chaînage d’optionnels est le signe que la fonctionnalité se rapproche des développeurs qui font usage de JavaScript également. C’est désormais la version finale de la spécification qui est attendue. En attendant, Microsoft va prendre les devants. La manœuvre pourrait, avec les retours d’expérience des développeurs TypeScript, influer sur les choix finaux du côté de JavaScript.

Sources : ticket TypeScript, tc39

Et vous ?

Qu’en pensez-vous ?
Comment accueillez-vous la disponibilité future de cet opérateur pour les langages de script TyepScript et JavaScript ?
Entrevoyez-vous des inconvénients à l’introduction de cette fonctionnalité ? Si oui, lesquels ?

Voir aussi :

Après avoir réécrit Angular en TypeScript, Google approuve le surensemble JavaScript de Microsoft pour ses développements internes
Google s'oriente vers TypeScript et voici pourquoi, selon Evan Martin, un ingénieur de la firme qui travaille sur le langage
TypeScript 3.1 est disponible, cette version s'accompagne des redirections de versions ainsi que des types de tableau et de tuple mappables
Microsoft annonce la disponibilité de TypeScript 3.3 qui apporte une meilleure gestion des projets composites introduits par TypeScript 3.0
La RC de TypeScript 3.4 est disponible et apporte une nouvelle syntaxe pour ReadonlyArray ainsi que la vérification de type pour globalThis

Une erreur dans cette actualité ? Signalez-nous-la !

Avatar de Sodium
Membre extrêmement actif https://www.developpez.com
Le 02/08/2019 à 12:33
Le moins de dépendances à des librairies externes devrait toujours être un objectif principal de développeur.

À part ça je ne connaissais pas cet opérateur dans les autres langages mais ça me semble très intéressant.
2  0 
Avatar de Sat7121
Membre à l'essai https://www.developpez.com
Le 06/11/2019 à 10:21
L'intérêt de ?? au lieu de || est de différencié le null du false :

foo || bar ne permet pas de savoir si foo vaut false ou null

foo ?? bar indique que l'on veut bar que si et seulement si foo est null.
2  0 
Avatar de goldbergg
Membre averti https://www.developpez.com
Le 06/11/2019 à 10:38
Sur le playground https://www.typescriptlang.org/

Ce code :
Code : Sélectionner tout
1
2
3
4
var a: number = 0;
var b = a ?? 1;
var c = a || 1;
console.log(a, b, c);
est convertie en :

Code : Sélectionner tout
1
2
3
4
5
"use strict";
var a = 0;
var b = (a !== null && a !== void 0 ? a : 1);
var c = a || 1;
console.log(a, b, c);//0 0 1
Le ?? est plus sur que le ||
2  0 
Avatar de dfiad77pro
Membre expérimenté https://www.developpez.com
Le 01/08/2019 à 17:00
J'aime bien cela venant de C#.

Cela dit attention à ce genre de code. Qu'on voit trop souvent :

Code : Sélectionner tout
1
2
3
4
personne?.adresse?.rue ='toto';
personne?.adresse?.cpost='69000';
personne?.adresse?.ville='=Lyon';
Dans ce cas il vaut mieux utiliser une seule condition pour éviter de répéter le test …
1  0 
Avatar de Marco46
Expert éminent sénior https://www.developpez.com
Le 02/08/2019 à 19:27
Oui évidemment c'est toujours mieux d'éviter des dépendances mais là c'est quand même lodash, c'était juste pour souligner que ça existe depuis longtemps avec une lib qui peut être considérée comme faisant partie de l'API standard.

Bref.
2  1 
Avatar de Goliver
Futur Membre du Club https://www.developpez.com
Le 09/11/2019 à 20:53
Aaah ! Super pour le ??, je l'attendais celui là !
1  0 
Avatar de grunk
Modérateur https://www.developpez.com
Le 06/11/2019 à 8:56
Quel est l'intérêt de "??" par rapport à || ?

On est bien d'accord que ces 2 solutions sont identiques ?
Code : Sélectionner tout
let x = foo ?? bar();
Code : Sélectionner tout
let x = foo || bar();
0  0 
Avatar de julienzk
Futur Membre du Club https://www.developpez.com
Le 06/11/2019 à 13:01
@goldbergg

Il est plus sur dans le sens ou il interprète pas la première valeur comme une "falsy/truthy".
D'ou la différence dans ton exemple entre b et c.

Edit: J'avais mal lu ton message, j'avais cru à une question ...
0  0 
Avatar de Marco46
Expert éminent sénior https://www.developpez.com
Le 01/08/2019 à 17:28
Ou sinon utiliser lodash.
2  5