Le chaînage en option avec Angular
ELEPHANT technologies, l’ESN locale et à taille humaine spécialisée sur 2 métiers : le développement et le pilotage autour de 4 expertises : hardware, embarqué, software et web.
Aujourd'hui on retrouve un article sur la chaine en option avec angular écrit par Martin développeur fullstack. Il nous explique comment l'utiliser pour la compilation d'une application.
Let’s go !
➜ L’Optional Chaining avec Angular est utilisé pour éviter les erreurs de type « null » et « undefined » lors de la compilation de l’application et s’avère très utile lorsqu’on veut accéder à des objets, qu’ils soient plus ou moins complexes et dont nous ne savons pas si l’objet ou une partie de l’objet est définie.
Utilisation de l’opérateur « ?. »
Prenons un exemple simple où nous voulons accéder à un jeu de carte contenant 52 cartes.
L’utilisateur veut afficher la carte numéro 1 du paquet par interpolation en rentrant dans l’objet paquet défini dans le typescript à partir du code html suivant :
Si l’objet paquet n’a pas encore été initialisé avec des données, l’application retournera l’erreur suivante :
En effet, lors de la lecture de l’objet paquet, il n’est pas encore défini et ne contient pas de ‘carte1’, il est alors impossible de lire la moindre donnée à l’intérieur de l’objet paquet.
Pour remédier à ce problème, on utilise l’opérateur comme suit :
Non non, le point d’interrogation n’est pas une question, il manquerait au moins un verbe et un pronom interrogatif ! En fait c’est plutôt une question à l’application, pour la prévenir que nous ne savons pas si « paquet » est défini ici. L’ordinateur va procéder de cette manière :
Cette manière de faire est très utile lorsqu’on veut éviter de bloquer l’application sur une ligne car la donnée est null ou undefined au moment de la lecture de l’objet. Peu importe si la donnée est undefined, null ou défini, le reste de l’application s’affichera comme prévu !
Pour comprendre plus précisément le fonctionnement de l’opérateur, on peut se dire qu’écrire le code 
revient exactement à écrire en forme plus étendue :
L’opérateur est aussi utilisable si on veut accéder à un array. Par exemple si on veut accéder à la 21ème carte du paquet de cartes en evitant les erreurs de team null ou undefined, on utilisera :
Il est aussi possible d’utilisateur l’optional chaining pour un appel de méthode qui peut ne pas exister. Cela s’avère utile lorsqu’on utilise par exemple une application qui contient des méthodes accessibles uniquement pour certains utilisateurs. Ainsi, le code suivant renverra la valeur undefined si la méthode n’est pas trouvée :
Alternatives
Il existe plusieurs alternatives à l’utilisation de cet opérateur. La première, c’est l’utilisation du *ngIf dans la balise où va être utilisé l’objet en question.
Dans le cas où paquet est null ou undefined, tout le paragraphe p n’est pas affiché à l’écran puisque la condition n’est pas respectée.
La seconde alternative consiste à utilisation la condition directement à l’intérieur du paragraphe.
Ainsi, l’application va d’abord tester paquet. Si paquet n’est pas null ou undefined, alors paquet.carte sera affiché, si bien sûr la carte existe à l’intérieur du paquet. Si elle n’existe pas, rien ne sera affiché, ‘null’ est renvoyé.
Attention !
Attention à ne pas confondre l’opérateur « ?. » avec l’opérateur « !. » ou encore l’opérateur « ?? » (Nullish coalescing operator). L’opérateur « !. » est utilisé pour spécifié à l’application que nous sommes sûrs que l’objet n’est pas à l’état null ou undefined. L’opérateur « ?? » quant à lui, est utilisé entre deux opérandes et permet de renvoyer l’opérande de droite si l’opérande de gauche est null ou undefined. (exemple : paquet ?? ‘valet de pique’ renverra ‘valet de pique’ si ‘paquet’ est null.
🐘 Nous remercions Martin pour cet article et si vous souhaitez vous aussi faire partie de la team n'hésitez pas à aller voir nos opportunités juste ici : https://www.elephant-technologies.fr/carriere/opportunites
Sources :
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining
https://medium.com/gradeup/optional-chaining-and-nullish-coalescing-as-a-saviour-34a0c024c6b3