Chaînage optionnel dans TypeScript
Dans cet article, nous expliquons le chaînage optionnel dans TypeScript.
YouTube Video
Chaînage optionnel dans TypeScript
Le chaînage optionnel dans TypeScript est une fonctionnalité utile pour accéder aux propriétés des objets ou tableaux profondément imbriqués. Cette fonctionnalité empêche les erreurs lors de l'accès à des propriétés inexistantes, vous permettant d'écrire un code concis et lisible.
Qu'est-ce que le chaînage optionnel ?
L'opérateur de chaînage optionnel (?.) renvoie undefined lorsque l'on accède à une propriété ou méthode d'un objet qui n'existe pas. Cela permet au code de continuer à s'exécuter sans lever d'erreur si la propriété n'existe pas.
Par exemple, lors de l'accès aux propriétés d'un objet imbriqué comme indiqué ci-dessous, une erreur survient si la propriété n'existe pas en utilisant la méthode habituelle.
Exemple
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined
- Dans ce cas, une erreur se produira si « address » n’existe pas. On peut utiliser le chaînage optionnel pour éviter cela.
Exemple utilisant l'enchaînement optionnel
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined
- L'utilisation du chaînage optionnel évite les erreurs et renvoie
undefinedà la place lorsque les propriétés n'existent pas.
Comment utiliser le chaînage optionnel
Le chaînage optionnel peut être utilisé dans divers scénarios, tels que l'accès aux propriétés, les appels de fonctions et l'accès aux tableaux. Nous expliquerons comment utiliser chacun d'eux.
Accéder aux propriétés
Vous pouvez accéder en toute sécurité aux propriétés imbriquées des objets.
1interface Company {
2 name: string;
3 location?: {
4 city?: string;
5 country?: string;
6 };
7}
8
9const company: Company = {
10 name: 'Tech Corp',
11 location: {
12 city: 'New York'
13 }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined
Ce code utilise la chaîne optionnelle pour accéder aux propriétés city et country uniquement si la propriété location existe sur l'objet company.
Appels de fonctions
Le chaînage optionnel peut également vérifier l'existence d'une fonction avant de l'appeler.
1interface User {
2 name?: string;
3 greet?: () => void;
4}
5
6const user: User = {
7 name: 'Bob',
8 // greet is undefined
9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs
Ce code utilise la chaîne optionnelle pour appeler en toute sécurité la fonction greet uniquement si elle existe. Aucune erreur ne se produit même si la fonction est indéfinie.
Accès aux tableaux
Le chaînage optionnel peut être appliqué aux tableaux pour vérifier si des éléments existent.
1interface Team {
2 members?: string[];
3}
4
5const team: Team = {
6 members: ['Alice', 'Bob', 'Charlie']
7};
8
9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined
Ce code accède aux éléments du tableau uniquement si team.members existe, renvoyant la valeur pour les indices existants et undefined pour les indices inexistants.
Chaînage optionnel et opérateur de fusion nullish
Le chaînage optionnel renvoie undefined, mais parfois cela ne suffit pas. Dans ce cas, l'opérateur de fusion nullish (??), introduit dans TypeScript 3.7, peut être utilisé pour fournir des valeurs par défaut pour null ou undefined.
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'
Lorsqu'il est combiné avec l'accès optionnel (optional chaining), vous pouvez écrire un code encore plus flexible.
1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
Précautions lors de l'utilisation de l'accès optionnel
Lors de l'utilisation du chaînage optionnel, il est important de garder les points suivants à l'esprit :.
-
Utilisation inutile du chaînage optionnel
- Utiliser le chaînage optionnel sur des propriétés ou des méthodes qui sont garanties d'exister peut rendre votre code inutilement verbeux. Il est préférable de l'utiliser uniquement lorsque l'existence de la cible à accéder est incertaine.
-
Erreurs typographiques
- Une utilisation excessive du chaînage optionnel peut rendre plus difficile la détection des erreurs typographiques qui conduisent à l'accès à des propriétés non intentionnelles. Effectuez des vérifications de type appropriées et utilisez-le avec prudence.
Résumé du code
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice',
11 address: {
12 city: 'Tokyo'
13 }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
Résumé
L'accès optionnel dans TypeScript permet d'écrire un code concis tout en évitant les erreurs lors de l'accès à des objets ou tableaux profondément imbriqués. De plus, le combiner avec l'opérateur de fusion nullish vous permet de définir des valeurs par défaut et de créer une logique plus flexible. Lorsqu'il est utilisé de manière appropriée, il peut améliorer considérablement la sécurité et la lisibilité du code.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.