L'opérateur de chaînage optionnel : une nouveauté de TypeScript 3.7

Avec la sortie récente de TypeScript 3.7, le chaînage optionnel fait enfin son entrée dans le langage.

Ce concept n'est pas tout jeune, l'équipe de TypeScript a vraiment tardé à l'inclure, le ticket était ouvert sur Github depuis 5 ans !

C'était le 16ème ticket de TypeScript

La raison ?
La crainte de trop anticiper le standard ECMAScript.

Qu'est-ce que l'opérateur de chaînage optionnel ?

L'opérateur de chaînage optionnel ?. permet de lire la valeur d'une propriété située dans une chaîne d'objets sans avoir à valider chaque référence dans la chaîne.

L'opérateur ?. fonctionne de manière similaire à l'opérateur de chaînage . (on parle aussi d'accesseurs de propriétés), à ceci près qu'il ne lève pas d'erreur si une référence est null ou undefined.

L'expression se court-circuite avec, pour valeur de retour, undefined .

Cas d'utilisation avec "."

let younup = you && you.andUp();

On cherche à savoir si you est truthy pour pouvoir exécuter you.andUp().

On alourdit alors la syntaxe en ajoutant un prédicat avant l'exécution de la fonction.

Cas d'utilisation avec "?."

let younup = you?.andUp();

On cherche à savoir si you est définit (valeur différente de undefined et null) pour pouvoir exécuter you.andUp().

Simple et efficace, ce nouvel opérateur ajoute de la clarté et du sens supplémentaire à notre code.

Les tableaux étant également des objets en JavaScript, il est possible d'utiliser la même syntaxe :

let member = teamYounup?.[0];

---

Merci d'avoir lu cet article !
Il a été posté initialement sur le le blog de @younup_it : https://www.younup.fr/blog/nouveautes-de-typescript-3-7-l-operateur-de-chainage-optionnel

---

Cover par Stephen Leonardi sur Unsplash

Comments

[David Dal Busco]

Merci pour le post en français de surcroît 👍

Le point est pas une typo dans le dernier exemple si teamYounup est un tableau?

let member = teamYounup?.[0];

vs

let member = teamYounup?[0];

[Denis SOURON]

Malheureusement on ne peut pas se passer du ?., même pour les tableaux.
La principale raison qui justifie ce choix est la complexité d'interprétation du chainage optionnel vs l'opérateur ternaire.

Par exemple, ces deux expressions deviennent plus difficile à "parser" en l'absence du point dans la syntaxe.

obj?[expr].filter(fun):0
func?(x - 2) + 3 :1

[Benjamin🦸‍♂️Auzanneau™]

Sans point, le moteur JavaScript va interpréter cela comme un ternaire avec : manquant.
Pour TypeScript, la transpilation ne sera fera pas non plus et lèvera une erreur similaire.
Le point est donc essentiel 👌

Exemple en JavaScript sur Firefox 75

let member = teamYounup?[0]; // 'SyntaxError: missing : in conditional expression'

EDIT :
Merci @brack0 pour ta réponse qui a été publiée un peu juste avant moi 👌

[David Dal Busco]

Ça fait sens, c'est plus jolie sans point, enfin ça se discute, mais ça fait sens.

Merci pour les explications @necraidan et @brack0 👍