Опциональная цепочка в TypeScript

В этой статье мы объясняем, что такое опциональная цепочка в TypeScript.

YouTube Video

Опциональная цепочка в TypeScript

Опциональная цепочка в TypeScript — это полезная функция для доступа к свойствам глубоко вложенных объектов или массивов. Эта функция предотвращает ошибки при доступе к несуществующим свойствам, позволяя писать лаконичный и читаемый код.

Что такое опциональная цепочка?

Оператор опциональной цепочки (?.) возвращает undefined, если свойство или метод объекта не существует. Это позволяет коду продолжить выполняться без выброса ошибки, если свойство не существует.

Например, при доступе к свойствам вложенного объекта, как показано ниже, возникает ошибка, если свойство не существует при использовании обычного метода.

Пример

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined

• В этом случае произойдет ошибка, если address не существует. Для предотвращения этой ситуации можно использовать опциональную цепочку.

Пример использования optional chaining

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined

• Использование опциональной цепочки предотвращает ошибки и возвращает undefined, если свойств не существует.

Как использовать опциональную цепочку

Опциональная цепочка может использоваться в различных сценариях, таких как доступ к свойствам, вызовы функций и доступ к массивам. Мы объясним, как использовать каждый из этих случаев.

Доступ к свойствам

Вы можете безопасно получать доступ к вложенным свойствам объектов.

 1interface Company {
 2    name: string;
 3    location?: {
 4        city?: string;
 5        country?: string;
 6    };
 7}
 8
 9const company: Company = {
10    name: 'Tech Corp',
11    location: {
12        city: 'New York'
13    }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined

Этот код использует опциональную последовательность для доступа к свойствам city и country только если свойство location существует в объекте company.

Вызовы функций

Опциональная цепочка также может проверять существование функции перед её вызовом.

 1interface User {
 2    name?: string;
 3    greet?: () => void;
 4}
 5
 6const user: User = {
 7    name: 'Bob',
 8    // greet is undefined
 9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs

Этот код использует опциональную последовательность для безопасного вызова функции greet только если она существует. Ошибка не возникает, даже если функция не определена.

Доступ к массивам

Опциональная цепочка может применяться к массивам для проверки существования элементов.

 1interface Team {
 2    members?: string[];
 3}
 4
 5const team: Team = {
 6    members: ['Alice', 'Bob', 'Charlie']
 7};
 8
 9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined

Этот код обращается к элементам массива только если team.members существует, возвращая значение для существующих индексов и undefined для несуществующих.

Опциональная последовательность и оператор нулевого слияния

Опциональная цепочка возвращает undefined, но иногда этого недостаточно. В этом случае оператор нулевого слияния (??), представленный в TypeScript 3.7, может использоваться для предоставления значений по умолчанию для null или undefined.

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'

В сочетании с опциональной цепочкой вы можете писать более гибкий код.

1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Предостережения при использовании опциональной цепочки

При использовании опциональной последовательности важно помнить о следующих моментах:.

• Необоснованное использование опциональной последовательности

  • Использование опциональной последовательности для свойств или методов, существование которых гарантировано, может сделать код излишне многословным. Лучше всего использовать ее только в случаях, когда существование целевого объекта вызывает сомнения.

• Опечатки

  • Чрезмерное использование опциональной последовательности может затруднить обнаружение опечаток, приводящих к обращению к нежелательным свойствам. Выполняйте правильную проверку типов и используйте ее осторожно.

Краткое описание кода

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice',
11    address: {
12        city: 'Tokyo'
13    }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Резюме

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

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video