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
Top comments (4)
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?vs
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.
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
EDIT :
Merci @brack0 pour ta réponse qui a été publiée un peu juste avant moi 👌
Ça fait sens, c'est plus jolie sans point, enfin ça se discute, mais ça fait sens.
Merci pour les explications @necraidan et @brack0 👍