Articles
Введение в TypeScript
Оператор объединения null в TypeScript

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

Отличие от оператора логического ИЛИ

Оператор логического ИЛИ рассматривает значения, такие как 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

Пример оператора нулевого слияния 

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

Выбор между оператором логического ИЛИ и оператором нулевого слияния зависит от того, допустимы ли 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 ?? "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
  • В интерфейсе User значение age имеет тип number | null, что позволяет использовать null или undefined в качестве значений.
  • Функция displayUserInfo возвращает "Anonymous", если name равно null или undefined, и 18, если age равно null или undefined.

Резюме

Оператор нулевого слияния помогает установить значение по умолчанию только тогда, когда значение равно 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, so the new value is assigned
3console.log(variable); // Output: "Default Value"

Используя этот оператор, вы можете более лаконично записать логику: "присваивать значение, если переменная равна undefined или null".

Сравнение с традиционными методами присваивания

Без оператора присваивания с нулевым слиянием вам пришлось бы использовать оператор if или тернарный оператор для достижения того же поведения. Давайте сравним с традиционными методами присваивания.

Обычный метод 

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

Метод с использованием тернарного оператора 

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

Сжатый метод с использованием оператора ??= 

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

Оператор присваивания с нулевым слиянием гораздо проще и удобнее для чтения по сравнению с другими методами присваивания, что улучшает читаемость кода.

Конкретные примеры использования оператора ??=

Оператор присваивания с нулевым слиянием полезен в различных сценариях, таких как инициализация свойств объектов и установка значений по умолчанию. Вот несколько конкретных примеров.

Инициализация свойств объекта 

 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: Этот оператор выполняет присваивание только если значение является null или undefined. Например, пустые строки (""), 0 и false не являются целевыми значениями.
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)
  • Комбинирование с другими операторами: Использование оператора присваивания с нулевым слиянием совместно с другими операторами может привести к непредвиденным результатам. Особенно важно понимать разницу между ним и оператором присваивания логического ИЛИ.
 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"

Пример кода 

 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

`Truthy` и `Falsy` в TypeScript