Оператор объединения null в TypeScript
В этой статье мы объясним оператор объединения null в TypeScript.
YouTube Video
Оператор объединения null в TypeScript
Оператор объединения null (??
) в TypeScript похож на короткое замыкание в JavaScript, но он более явно используется для предоставления запаса значения только в случае, если левая часть равна null
или undefined
. Этот оператор позволяет легко проверить, является ли значение null
или undefined
, и при необходимости установить значение по умолчанию.
Оператор объединения null (??
) возвращает значение правой части только в том случае, если левая часть равна null
или undefined
. Это позволяет значениям, таким как false
, пустая строка или число 0
, оцениваться как они есть. Это главное отличие от традиционного оператора логического ИЛИ (||
). Этот оператор был введен в TypeScript 3.7.
Базовый синтаксис
Основной синтаксис выглядит следующим образом:.
1let result = value ?? defaultValue;
value
— это проверяемое значение на наличиеnull
илиundefined
.defaultValue
— это значение, возвращаемое, еслиvalue
равноnull
илиundefined
.
Пример использования
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
Здесь функция getUserName
возвращает "Default User"
, если userName
равно null
или undefined
, в противном случае она возвращает значение userName
.
Отличие от оператора логического ИЛИ
Существует важное различие между оператором объединения с null и логическим оператором ИЛИ. Оператор логического ИЛИ рассматривает значения, такие как false
, 0
и ""
(пустая строка), как "ложные", так же, как null
и undefined
. С другой стороны, оператор объединения null использует только null
и undefined
для резервного значения.
Пример оператора логического ИЛИ
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
- Как показано, логический оператор ИЛИ возвращает значение по умолчанию
18
, даже если значение равно0
.
Пример оператора нулевого слияния
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
-
С другой стороны, оператор объединения с null возвращает исходное значение, даже если оно равно
0
. -
Выбор между логическим оператором ИЛИ и оператором объединения с null зависит от того, приемлемы ли
0
или пустая строка. Например, если вы хотите сохранить возраст пользователя как0
, необходимо использовать оператор нулевого слияния.
Сочетание с типами
Вы можете повысить надежность вашего кода, используя безопасность типов TypeScript в сочетании с оператором объединения null. В следующем примере значения по умолчанию используются, когда некоторые свойства равны null
или 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
- В интерфейсе
User
свойствоage
может бытьnumber
,null
илиundefined
, поэтому оператор объединения с null используется для присвоения значения по умолчанию18
. - Между тем, свойство
name
принимает толькоstring
, поэтому значение используется, как есть.
Резюме
- Оператор нулевого слияния помогает установить значение по умолчанию только тогда, когда значение равно
null
илиundefined
. В отличие от традиционного логического оператора ИЛИ, он не рассматриваетfalse
,0
или пустые строки как «ложные» значения, что делает его особенно полезным, когда вы хотите сохранить эти значения. Кроме того, его комбинирование с типовой системой TypeScript позволяет создавать более надежный и читаемый код. - Эффективно используя оператор объединения с null, вы можете лаконично записывать логику для установки значений по умолчанию, сокращая избыточные проверки на
null
.
Оператор присваивания объединения с null в TypeScript
Оператор присваивания объединения с null (??=
) — это относительно новый оператор, введенный в TypeScript, предоставляющий удобный способ присвоения значения только в том случае, если переменная равна null
или undefined
. Здесь мы объясним, как работает этот оператор, в каких ситуациях он эффективен, и приведем примеры с кодом.
Что такое оператор присваивания объединения с null
Оператор присваивания с нулевым слиянием - это оператор присваивания, основанный на операторе нулевого слияния. Этот оператор используется для присвоения нового значения только в том случае, если переменная равна null
или 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"
Используя этот оператор, вы можете более лаконично записать логику: "присваивать значение, если переменная равна undefined или null".
Сравнение с традиционными методами присваивания
Без оператора присваивания с нулевым слиянием вам пришлось бы использовать оператор if
или тернарный оператор для достижения того же поведения. Давайте сравним с традиционными методами присваивания.
Обычный метод
Используя оператор if
, это можно записать следующим образом:.
1let variable: string | null | undefined = null;
2if (variable === null || variable === undefined) {
3 variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"
Метод с использованием тернарного оператора
Или, используя тернарный оператор, это можно записать следующим образом:.
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"
Краткий метод с использованием оператора присваивания с объединением по null.
С другой стороны, используя оператор присваивания с объединением по null, это можно записать так:.
1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"
Как показано, оператор присваивания с объединением по null намного проще и читаемее по сравнению с другими методами присваивания, что улучшает читаемость кода.
Конкретные примеры использования оператора ??=
Оператор присваивания с нулевым слиянием полезен в различных сценариях, таких как инициализация свойств объектов и установка значений по умолчанию. Вот несколько конкретных примеров.
Инициализация свойств объекта
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" }
Инициализация массивов
1let numbers: number[] | null = null;
2numbers ??= []; // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]
Установка значений по умолчанию для аргументов функции
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!"
Примечания и ограничения
Оператор присваивания с нулевым слиянием очень полезен, но имеет некоторые особенности.
Только null
и undefined
являются целевыми..
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)
- Этот оператор выполняет присваивание только в том случае, если значение равно
null
илиundefined
. Например, такие значения, как пустая строка (""
),0
илиfalse
, не являются целевыми.
Будьте осторожны при использовании этого оператора с другими операторами..
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"
- Оператор присваивания с объединением по null может вызвать непреднамеренные результаты при использовании с другими операторами. Особенно важно понимать разницу между ним и оператором присваивания логического ИЛИ.
Пример кода
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]
- Используя оператор присваивания с нулевым слиянием, вы можете устранить избыточный код и написать более компактный и элегантный TypeScript-код.
Резюме
Оператор присваивания nullish coalescing (??=
) — это одна из простых и эффективных операций присваивания в TypeScript. Он особенно полезен, когда необходимо проверять значения null
или undefined
при установке значений по умолчанию. По сравнению с традиционными операторами if
или тернарными операторами, код становится более лаконичным и читаемым.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.