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ò significa che valori come false, una stringa vuota o il numero 0 rimangono invariati. Questa è una differenza importante rispetto all'operatore OR logico tradizionale (||). Questo operatore è stato introdotto in TypeScript 3.7.

Sintassi di Base

1let result = value ?? defaultValue;

• value: Il valore da verificare se è null o undefined
• defaultValue: Il valore restituito se 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

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

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

La scelta tra l'operatore OR logico e l'operatore di coalescenza nullish dipende dal fatto che 0 e stringhe vuote 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 ?? "Anonymous";
 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, age è number | null, permettendo null o undefined come valore.
• La funzione displayUserInfo restituisce "Anonymous" se name è null o undefined, e 18 se age è null o undefined.

Riepilogo

L'operatore di coalescenza nullish aiuta a impostare un valore predefinito solo quando il valore è null o undefined. A differenza dell'operatore OR logico tradizionale, non considera false, 0 o stringhe vuote come "falsy", rendendolo particolarmente utile per preservare questi 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, so the new value is assigned
3console.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

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

Metodo che utilizza l'operatore ternario

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

Metodo conciso che utilizza l'operatore ??=

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

L'operatore di assegnazione tramite coalescenza nullish è molto più semplice e leggibile rispetto ad altri metodi di assegnazione, migliorando la leggibilità 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.

• Destinato solo a null e undefined: Questo operatore assegna solo se il valore è null o undefined. Ad esempio, stringhe vuote (""), 0 e false non sono considerati come target.

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)

• Combinazione con altri operatori: L'utilizzo dell'operatore di assegnazione tramite coalescenza nullish con altri operatori potrebbe portare a risultati indesiderati. È particolarmente importante comprendere la differenza tra esso e l'operatore di assegnazione OR logico.

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

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 alle istruzioni if tradizionali o agli operatori ternari, rende il codice più conciso e leggibile, e dovrebbe essere utilizzato attivamente nello sviluppo futuro.

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

YouTube Video