Operator łączenia wartości nullish w TypeScript

W tym artykule wyjaśnimy operator łączenia wartości nullish w TypeScript.

YouTube Video

Operator łączenia wartości nullish w TypeScript

Operator łączenia wartości nullish (??) w TypeScript jest podobny do skróconej ewaluacji JavaScript, ale jest używany bardziej jawnie, aby zapewnić wartość domyślną tylko wtedy, gdy lewa strona jest null lub undefined. Ten operator pozwala łatwo sprawdzić, czy wartość jest null lub undefined, i ustawić wartość domyślną w razie potrzeby.

Operator łączenia wartości nullish (??) zwraca wartość z prawej strony tylko wtedy, gdy lewa strona jest null lub undefined. Pozwala to na ocenę wartości takich jak false, pusty ciąg znaków lub liczba 0 dokładnie takimi, jakimi są. To jest istotna różnica w porównaniu z tradycyjnym operatorem logicznym LUB (||). Ten operator został wprowadzony w TypeScript 3.7.

Podstawowa składnia

Podstawowa składnia wygląda następująco:.

1let result = value ?? defaultValue;

• value to wartość, która jest sprawdzana pod kątem null lub undefined.
• defaultValue to wartość zwracana, gdy value ma wartość null lub undefined.

Przykładowe użycie

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

Tutaj funkcja getUserName zwraca "Default User", jeśli userName jest null lub undefined, w przeciwnym razie zwraca wartość userName.

Różnica w porównaniu z operatorem logicznym LUB

Istnieje istotna różnica między operatorem nullish coalescing a operatorem logicznym OR. Operator logiczny LUB traktuje wartości takie jak false, 0 oraz "" (pusty ciąg znaków) jako "fałsz", podobnie jak null i undefined. Z kolei operator łączenia wartości nullish wykorzystuje tylko null i undefined jako wartości zastępcze.

Przykład operatora logicznego LUB

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

• Jak pokazano, operator logic OR zwróci wartość domyślną 18, nawet gdy wartość jest 0.

Przykład operatora scala wartości nienullowych

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

• Z drugiej strony, operator nullish coalescing zwróci oryginalną wartość, nawet jeśli jest to 0.

• Wybór między operatorem logic OR a operatorem nullish coalescing zależy od tego, czy wartość 0 lub pusty ciąg znaków są akceptowane. Na przykład, jeśli chcesz zachować wiek użytkownika jako 0, musisz użyć operatora scala wartości nienullowych.

Kombinacja z typami

Możesz zwiększyć niezawodność swojego kodu, korzystając z bezpieczeństwa typów w TypeScript w połączeniu z operatorem łączenia wartości nullish. W poniższym przykładzie używane są wartości domyślne, gdy niektóre właściwości są null lub 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

• W interfejsie User, właściwość age może być number, null lub undefined, dlatego operator nullish coalescing jest używany do przypisania wartości domyślnej 18.
• Z kolei właściwość name akceptuje tylko typ string, więc wartość jest używana tak, jak jest.

Podsumowanie

• Operator scala wartości nienullowych pomaga ustawić wartość domyślną tylko wtedy, gdy wartość wynosi null lub undefined. W przeciwieństwie do tradycyjnego operatora logic OR, nie traktuje wartości false, 0 lub pustych ciągów znaków jako 'falsy', co czyni go szczególnie przydatnym, gdy chcesz zachować te wartości. Dodatkowo, połączenie go z systemem typów TypeScript umożliwia tworzenie bardziej solidnego i czytelnego kodu.
• Efektywne użycie operatora nullish coalescing pozwala na zwięzłe zapisywanie logiki ustawiania wartości domyślnych, jednocześnie redukując zbędne sprawdzanie wartości null.

Operator przypisania nullish coalescing w TypeScript

Operator przypisania nullish coalescing (??=) to stosunkowo nowy operator wprowadzony w TypeScript, który zapewnia wygodny sposób przypisania wartości tylko wtedy, gdy zmienna ma wartość null lub undefined. Wyjaśnimy tutaj, jak działa ten operator, w jakich sytuacjach jest skuteczny i podamy przykłady kodu.

Czym jest operator przypisania nullish coalescing

Operator przypisania scala wartości nienullowych to operator przypisania oparty na operatorze scala wartości nienullowych. Ten operator służy do przypisania nowej wartości tylko wtedy, gdy zmienna ma wartość null lub 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"

Używając tego operatora, możesz zwięźlej zapisać logikę „przypisz, jeśli zmienna jest niezdefiniowana lub ma wartość null”.

Porównanie z tradycyjnymi metodami przypisania

Bez operatora przypisania scala wartości nienullowych musiałbyś użyć instrukcji if lub operatora trójargumentowego, aby osiągnąć takie samo zachowanie. Porównajmy to z tradycyjnymi metodami przypisania.

Konwencjonalna metoda

Używając instrukcji if, można to zapisać w następujący sposób:.

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

Metoda wykorzystująca operator trójwartościowy

Alternatywnie, używając operatora trójskładnikowego, można to zapisać w następujący sposób:.

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"

Zwięzła metoda wykorzystująca operator przypisania nullish coalescing

Z drugiej strony, używając operatora przypisania nullish coalescing, można to zapisać w następujący sposób:.

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

Jak pokazano, operator przypisania nullish coalescing jest znacznie prostszy i bardziej czytelny w porównaniu z innymi metodami przypisania, co poprawia przejrzystość kodu.

Konkretny przykład użycia ??=

Operator przypisania scala wartości nienullowych jest przydatny w różnych sytuacjach, takich jak inicjalizacja właściwości obiektów i ustawianie wartości domyślnych. Oto kilka konkretnych przykładów.

Inicjalizacja właściwości obiektu

 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" }

Inicjalizacja tablic

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

Ustalanie wartości domyślnych argumentów funkcji

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!"

Uwagi i ograniczenia

Operator przypisania scala wartości nienullowych jest bardzo użyteczny, ale istnieją pewne zastrzeżenia.

Tylko null i undefined są brane pod uwagę..

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)

• Ten operator wykonuje przypisanie tylko wtedy, gdy wartość to null lub undefined. Na przykład wartości takie jak pusty ciąg znaków (""), 0 lub false nie są brane pod uwagę.

Zachowaj ostrożność podczas używania go z innymi operatorami..

 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"

• Operator przypisania nullish coalescing może powodować niezamierzone skutki, gdy jest używany z innymi operatorami. Szczególnie ważne jest zrozumienie różnicy między nim a operatorem przypisania logicznego LUB.

Przykładowy Kod

 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]

• Dzięki użyciu operatora przypisania scala wartości nienullowych możesz wyeliminować zbędny kod i pisać bardziej płynny i elegancki kod TypeScript.

Podsumowanie

Operator przypisania nullish coalescing (??=) jest jednym z prostych i wydajnych operatorów przypisania w TypeScript. Jest szczególnie przydatny, gdy musisz sprawdzać null lub undefined, ustawiając wartości domyślne. W porównaniu z tradycyjnymi instrukcjami if lub operatorami trójskładnikowymi, kod staje się bardziej zwięzły i czytelny.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video