DEV Community

Cover image for L'opérateur de chaînage optionnel : une nouveauté de TypeScript 3.7
Younup profile image Benjamin🦸‍♂️Auzanneau™
Benjamin🦸‍♂️Auzanneau™ for Younup

Posted on • Edited on

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

#javascript #typescript #french #francais

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
daviddalbusco profile image
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];
Enter fullscreen mode Exit fullscreen mode

vs

let member = teamYounup?[0];
Enter fullscreen mode Exit fullscreen mode
Collapse
 
brack0 profile image
Denis SOURON Younup •

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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
necraidan profile image
Benjamin🦸‍♂️Auzanneau™ Younup • • Edited

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 👌

Collapse
 
daviddalbusco profile image
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 👍