Operatore di Coalescenza Nullish in TypeScript

In questo articolo, spiegheremo l'Operatore di Coalescenza Nullish in TypeScript.

YouTube Video

Operatore di Coalescenza Nullish in TypeScript

L'operatore di coalescenza nullish (??) in TypeScript è simile alla valutazione short-circuit di JavaScript, ma è utilizzato in modo più esplicito per fornire un valore di fallback solo quando il lato sinistro è null o undefined. Questo operatore permette di verificare facilmente se un valore è null o undefined e di impostare un valore predefinito se necessario.

L'operatore di coalescenza nullish (??) restituisce il valore a destra solo se il lato sinistro è null o undefined. Ciò consente di valutare valori come false, una stringa vuota o il numero 0 così come sono. Questa è una differenza importante rispetto all'operatore OR logico tradizionale (||). Questo operatore è stato introdotto in TypeScript 3.7.

Sintassi di Base

La sintassi di base è la seguente:.

1let result = value ?? defaultValue;

• value è l'elemento su cui viene verificato null o undefined.
• defaultValue è il valore restituito quando value è null o undefined.

Esempio di utilizzo

1function getUserName(userName: string | null | undefined): string {
2    return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice"));  // Output: Alice
6console.log(getUserName(null));     // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User

Qui, la funzione getUserName restituisce "Default User" se userName è null o undefined; altrimenti, restituisce il valore di userName.

Differenza dall'operatore OR logico

Esiste una differenza importante tra l'operatore nullish coalescing e l'operatore OR logico. L'operatore OR logico tratta valori come false, 0 e "" (stringa vuota) come "falsy", proprio come null e undefined. D'altra parte, l'operatore di coalescenza nullish utilizza solo null e undefined per il fallback.

Esempio dell'operatore OR logico

1function getUserAge(age: number | null | undefined): number {
2    return age || 18;  // `0` also applies the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 18
7console.log(getUserAge(null)); // Output: 18

• Come mostrato, l'operatore OR logico restituisce il valore predefinito 18 anche quando il valore è 0.

Esempio dell'operatore di coalescenza nullish

1function getUserAge(age: number | null | undefined): number {
2    return age ?? 18;  // `0` does not apply the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 0
7console.log(getUserAge(null)); // Output: 18

• D'altra parte, l'operatore nullish coalescing restituisce il valore originale anche quando è 0.

• La scelta tra l'operatore OR logico e l'operatore nullish coalescing dipende dal fatto che 0 o una stringa vuota siano accettabili. Ad esempio, se vuoi mantenere l'età di un utente come 0, devi utilizzare l'operatore di coalescenza nullish.

Combinazione con i Tipi

Puoi migliorare la robustezza del tuo codice sfruttando la sicurezza dei tipi di TypeScript in combinazione con l'operatore di coalescenza nullish. Nel seguente esempio, vengono utilizzati valori predefiniti quando alcune proprietà sono null o undefined.

 1interface User {
 2    name: string;
 3    age?: number | null;
 4}
 5
 6function displayUserInfo(user: User): string {
 7    const userName: string = user.name;
 8    const userAge: number = user.age ?? 18;
 9    return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18

• Nell'interfaccia User, la proprietà age può essere un number, null o undefined, quindi viene utilizzato l'operatore nullish coalescing per assegnare un valore predefinito di 18.
• Nel frattempo, la proprietà name consente solo string, quindi il valore viene utilizzato così com'è.

Riepilogo

• L'operatore di coalescenza nullish aiuta a impostare un valore predefinito solo quando il valore è null o undefined. A differenza del tradizionale operatore OR logico, non considera false, 0 o stringhe vuote come valori 'falsy', rendendolo particolarmente utile quando si desidera preservare tali valori. Inoltre, combinarlo con il sistema di tipi di TypeScript consente di creare codice più robusto e leggibile.
• Utilizzando efficacemente l'operatore di coalescenza nullish, è possibile scrivere in modo conciso la logica per impostare valori predefiniti riducendo i controlli null non necessari.

Operatore di assegnazione con coalescenza nullish in TypeScript

L'operatore di assegnazione con coalescenza nullish (??=) è un operatore relativamente nuovo introdotto in TypeScript, che fornisce un metodo pratico per assegnare un valore solo se la variabile è null o undefined. Qui spiegheremo come funziona questo operatore, in quali situazioni è efficace e forniremo esempi con codice.

Cos'è l'operatore di assegnazione con coalescenza nullish

L'operatore di assegnazione tramite coalescenza nullish è un operatore di assegnazione basato sull'operatore di coalescenza nullish. Questo operatore viene utilizzato per assegnare un nuovo valore solo se la variabile è null o undefined.

1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null,
3                              // so the new value is assigned
4
5console.log(variable); // Output: "Default Value"

Utilizzando questo operatore, è possibile scrivere in modo più conciso la logica di "assegna se la variabile è undefined o null".

Confronto con i metodi di assegnazione tradizionali

Senza l'operatore di assegnazione tramite coalescenza nullish, avresti bisogno di utilizzare un'istruzione if o un operatore ternario per ottenere lo stesso comportamento. Confrontiamo con i metodi di assegnazione tradizionali.

Metodo convenzionale

Utilizzando un'istruzione if, può essere scritto come segue:.

1let variable: string | null | undefined = null;
2if (variable === null || variable === undefined) {
3    variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"

Metodo che utilizza l'operatore ternario

In alternativa, utilizzando l'operatore ternario, può essere scritto come segue:.

1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"

Un metodo conciso che utilizza l'operatore di assegnazione nullish coalescing

D'altra parte, utilizzando l'operatore di assegnazione nullish coalescing, può essere scritto così:.

1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"

Come mostrato, l'operatore di assegnazione nullish coalescing è molto più semplice e leggibile rispetto ad altri metodi di assegnazione, migliorando la chiarezza del codice.

Esempi specifici di utilizzo di ??=

L'operatore di assegnazione tramite coalescenza nullish è utile in vari scenari, come l'inizializzazione di proprietà di oggetti e l'impostazione di valori predefiniti. Ecco alcuni esempi specifici.

Inizializzazione delle proprietà dell'oggetto

 1interface Config {
 2    theme?: string;
 3    language?: string;
 4}
 5
 6let config: Config = {};
 7config.theme ??= "light";  // Set the default "light" theme if none is specified
 8config.language ??= "en";  // Set the default "en" language if none is specified
 9
10console.log(config); // Output: { theme: "light", language: "en" }

Inizializzazione degli array

1let numbers: number[] | null = null;
2numbers ??= [];  // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]

Impostazione dei valori predefiniti per gli argomenti delle funzioni

1function greet(name?: string) {
2    name ??= "Guest";  // Set name to "Guest" if it is undefined or null
3    console.log(`Hello, ${name}!`);
4}
5
6greet();          // Output: "Hello, Guest!"
7greet("Alice");   // Output: "Hello, Alice!"

Note e limitazioni

L'operatore di assegnazione tramite coalescenza nullish è molto utile, ma ci sono alcune avvertenze.

Solo null e undefined sono interessati..

1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)

• Questo operatore esegue l'assegnazione solo quando il valore è null o undefined. Ad esempio, valori come una stringa vuota (""), 0 o false non sono interessati.

Fai attenzione quando lo utilizzi insieme ad altri operatori..

 1let value: string | null = null;
 2
 3// Targets not only "null" and "undefined" but also falsy values
 4value ||= "Default";
 5console.log(value);  // Output: "Default"
 6
 7value = "";
 8// An empty string is also targeted
 9value ||= "Default";
10console.log(value);  // Output: "Default"
11
12value = null;
13// Targets only null or undefined
14value ??= "Default";
15console.log(value);  // Output: "Default"

• L'operatore di assegnazione nullish coalescing può produrre risultati indesiderati quando utilizzato con altri operatori. È particolarmente importante comprendere la differenza tra esso e l'operatore di assegnazione OR logico.

Codice di esempio

 1let config: { theme?: string; language?: string } = {};
 2
 3// Use Nullish Coalescing Assignment to set default values
 4config.theme ??= "light";
 5config.language ??= "en";
 6
 7console.log(config); // Output: { theme: "light", language: "en" }
 8
 9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]

• Utilizzando l'operatore di assegnazione tramite coalescenza nullish, puoi eliminare codice non necessario e scrivere codice TypeScript più fluido e più elegante.

Riepilogo

L'operatore di assegnazione nullish coalescing (??=) è una delle operazioni di assegnazione semplici ed efficienti in TypeScript. È particolarmente utile quando è necessario verificare null o undefined durante l'impostazione di valori predefiniti. Rispetto a istruzioni if tradizionali o operatori ternari, il codice diventa più conciso e leggibile.

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

YouTube Video