Оператор объединения 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-канал.

YouTube Video