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. Oznacza to, że wartości takie jak false, pusty ciąg znaków czy liczba 0 pozostają niezmienione. To jest istotna różnica w porównaniu z tradycyjnym operatorem logicznym LUB (||). Ten operator został wprowadzony w TypeScript 3.7.

Podstawowa składnia

1let result = value ?? defaultValue;

• value: Wartość do sprawdzenia, czy jest null lub undefined
• defaultValue: Wartość zwracana, jeśli value jest 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

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

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

Wybór między operatorem logicznym LUB a operatorem scala wartości nienullowych zależy od tego, czy 0 i puste ciągi znaków są akceptowalne. 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 ?? "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

• W interfejsie User age to number | null, co pozwala na null lub undefined jako jego wartość.
• Funkcja displayUserInfo zwraca "Anonymous", jeśli name jest null lub undefined, a 18, jeśli age jest null lub undefined.

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 logicznego LUB, nie traktuje on wartości false, 0 ani pustych ciągów znaków jako "fałsz", co czyni go szczególnie użytecznym do zachowywania tych 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, so the new value is assigned
3console.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

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

Metoda wykorzystująca operator trójwartościowy

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

Zwięzła metoda z wykorzystaniem operatora ??=

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

Operator przypisania scala wartości nienullowych jest znacznie prostszy i czytelniejszy w porównaniu z innymi metodami przypisania, co poprawia czytelność 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.

• Dotyczy tylko null i undefined: Ten operator przypisuje wartość tylko wtedy, gdy wartość to null lub undefined. Na przykład puste ciągi znaków (""), 0 i false nie są objęte.

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)

• Łączenie z innymi operatorami: Używanie operatora przypisania scala wartości nienullowych z innymi operatorami może prowadzić do niezamierzonych rezultatów. Szczególnie ważne jest zrozumienie różnicy między nim a operatorem przypisania logicznego LUB.

 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"

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ójargumentowymi, sprawia, że kod jest bardziej zwięzły i czytelny, i powinien być aktywnie wykorzystywany w przyszłym rozwoju.

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

YouTube Video