L'opérateur de chaînage optionnel, décryptage d'une des principales nouveautés 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 mais 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 <span class="css-span">?.</span> 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 <span class="css-span">null</span> ou <span class="css-span">undefined</span>.

L'expression se court-circuite avec, pour valeur de retour, <span class="css-span">undefined</span>.

Cas d'utilisation avec "." :

<pre><code>let younup = you && you.andUp();</code></pre>

On cherche à savoir si you est <span class="css-span">truthy </span>pour pouvoir exécuter <span class="css-span">you.andUp()</span>.

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

Cas d'utilisation avec <span class="css-span">?.</span> :

<pre><code>let younup = you?.andUp();</code></pre>
‍

On cherche à savoir si you est défini (valeur différente de <span class="css-span">undefined</span> et <span class="css-span">null</span>) pour pouvoir exécuter <span class="css-span">you.andUp()</span>.

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 :

<pre><code>let member = teamYounup?.[0];</code></pre>