Chaining Opzionale in TypeScript

In questo articolo, spieghiamo il Chaining Opzionale in TypeScript.

YouTube Video

Chaining Opzionale in TypeScript

Il chaining opzionale in TypeScript è una funzionalità utile per accedere alle proprietà di oggetti o array annidati in profondità. Questa funzionalità previene errori quando si accede a proprietà inesistenti, consentendoti di scrivere codice conciso e leggibile.

Che cos'è il Chaining Opzionale?

L'operatore di chaining opzionale (?.) restituisce undefined quando si accede a una proprietà o un metodo di un oggetto che non esiste. Questo permette al codice di continuare a funzionare senza generare un errore se la proprietà non esiste.

Ad esempio, quando si accede alle proprietà di un oggetto annidato come mostrato di seguito, si verifica un errore se la proprietà non esiste utilizzando il metodo usuale.

Esempio

 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

• In questo caso, si verificherà un errore se address non esiste. Il chaining opzionale può essere utilizzato per evitare questo.

Esempio di utilizzo della concatenazione opzionale

 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'utilizzo del chaining opzionale evita errori e restituisce undefined quando le proprietà non esistono.

Come Utilizzare il Chaining Opzionale

Il chaining opzionale può essere utilizzato in vari scenari, come l'accesso alle proprietà, le chiamate a funzioni e l'accesso agli array. Spiegheremo come usare ciascuno di questi.

Accesso alle Proprietà

Puoi accedere in modo sicuro alle proprietà annidate di oggetti.

 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

Questo codice utilizza l'optional chaining per accedere alle proprietà city e country solo se la proprietà location esiste sull'oggetto company.

Chiamate a Funzioni

Il chaining opzionale può anche verificare l'esistenza di una funzione prima di chiamarla.

 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

Questo codice utilizza l'optional chaining per invocare in modo sicuro la funzione greet solo se essa esiste. Non si verifica alcun errore anche se la funzione non è definita.

Accesso agli Array

Il chaining opzionale può essere applicato agli array per verificare se gli elementi esistono.

 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

Questo codice accede agli elementi dell'array solo se team.members esiste, restituendo il valore per gli indici esistenti e undefined per quelli inesistenti.

Optional Chaining e l’operatore Nullish Coalescing

Il chaining opzionale restituisce undefined, ma a volte questo non è sufficiente. In questo caso, l’operatore nullish coalescing (??), introdotto in TypeScript 3.7, può essere utilizzato per fornire valori predefiniti in caso di null o 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'

Quando combinato con l'optional chaining, puoi scrivere codice ancora più flessibile.

1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Avvertenze sull'uso dell'optional chaining

Quando si utilizza l'optional chaining, è importante tenere a mente i seguenti punti:.

• Uso non necessario dell’optional chaining

  • Utilizzare l’optional chaining su proprietà o metodi che sono garantiti può rendere il codice inutilmente prolisso. È meglio usarlo solo quando l'esistenza dell'elemento a cui si accede è incerta.

• Errori di battitura

  • Un uso eccessivo dell’optional chaining può rendere più difficile individuare errori di battitura che portano ad accedere a proprietà non volute. Esegui controlli di tipo appropriati e usalo con cautela.

Riassunto del codice

 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'

Riepilogo

L'optional chaining in TypeScript consente di scrivere codice conciso evitando errori durante l'accesso a oggetti o array annidati. Inoltre, combinarlo con l’operatore nullish coalescing consente di impostare valori predefiniti e creare una logica più flessibile. Se utilizzato correttamente, può migliorare significativamente la sicurezza e la leggibilità del codice.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video