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ątemnull
lubundefined
.defaultValue
to wartość zwracana, gdyvalue
ma wartośćnull
lubundefined
.
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ść jest0
.
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 jako0
, 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
lubundefined
, dlatego operator nullish coalescing jest używany do przypisania wartości domyślnej18
. - Z kolei właściwość
name
akceptuje tylko typstring
, 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
lubundefined
. W przeciwieństwie do tradycyjnego operatora logic OR, nie traktuje wartościfalse
,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
lubundefined
. Na przykład wartości takie jak pusty ciąg znaków (""
),0
lubfalse
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.