Как использовать опциональную цепочку (optional chaining) с массивами и функциями в TypeScript?

Question

learn_code86 · 09.05.2026

Как использовать опциональную цепочку (optional chaining) с массивами и функциями в TypeScript?

Всем привет! Я новичок в TypeScript и столкнулся с проблемой при использовании опциональной цепочки (?.). Я знаю, что она помогает безопасно обращаться к вложенным свойствам объектов, но не могу понять, как правильно применять её к массивам и функциям. Вот пример с массивом. У меня есть объект `user`, у которого может быть массив `posts`. Я хочу получить первый пост, если массив существует, иначе вернуть `undefined`: ```typescript interface User { name: string; posts?: Post[]; } interface Post { title: string; content: string; } const user: User = { name: "Alice" }; // Пытаюсь получить первый пост const firstPost = user.posts?.[0]; // Ошибка: "The left-hand side of an assignment expression may not be optional property access." ``` Я попробовал `user.posts?[0]` — не работает. Потом прочитал, что нужно писать `user.posts?.[0]`, но всё равно получаю ошибку. В чём проблема? Ещё вопрос с функциями. У меня есть объект с опциональным методом `getFullName`: ```typescript interface Person { firstName: string; lastName: string; getFullName?: () => string; } const person: Person = { firstName: "John", lastName: "Doe" }; // Хочу вызвать метод, если он существует const fullName = person.getFullName?.(); // Тут ошибка: "Cannot invoke an object which is possibly 'undefined'." ``` Подскажите, как правильно использовать опциональную цепочку с индексами массивов и вызовом функций? Заранее спасибо! <<>>

Правильное использование опциональной цепочки с массивами и функциями

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

1. Опциональная цепочка с массивами

Синтаксис ?.[] абсолютно верный. Проблема в вашем коде — это не ошибка TypeScript, а скорее особенность вашего редактора или версии TypeScript. Правильный синтаксис:

const firstPost = user.posts?.[0]; // Работает в TypeScript 3.7+

Этот код безопасно вернёт undefined, если posts отсутствует, или первый элемент массива, если он существует. Если массив пустой, вернётся undefined.

Если вы получаете ошибку "The left-hand side of an assignment expression may not be optional property access", проверьте:

Версию TypeScript (должна быть 3.7 или выше)
Настройки tsconfig.json (должен быть флаг "strict": true или "strictNullChecks": true)
Не пытаетесь ли вы присвоить значение: user.posts?.[0] = newPost — так нельзя, опциональная цепочка только для чтения

2. Опциональная цепочка с функциями

Синтаксис ?() тоже верный. Ошибка "Cannot invoke an object which is possibly 'undefined'" возникает из-за строгих проверок TypeScript. Вот правильный способ:

const fullName = person.getFullName?.(); // TypeScript может ругаться, если strict: true

Чтобы избежать ошибки, нужно явно указать, что метод может отсутствовать. Используйте защитный тип:

// Вариант 1: Проверка через if
if (person.getFullName) {
  const fullName = person.getFullName(); // TypeScript знает, что метод существует
}

// Вариант 2: Опциональная цепочка с приведением типа
const fullName = person.getFullName?.() as string | undefined;

// Вариант 3: Использование оператора ! (не рекомендуется)
const fullName = person.getFullName!(); // Опасно, может упасть в runtime

Полный рабочий пример

interface User {
  name: string;
  posts?: Post[];
  getGreeting?: () => string;
}

interface Post {
  title: string;
}

const user: User = { name: "Alice" };

// Безопасный доступ к массиву
const firstPostTitle = user.posts?.[0]?.title; // undefined
console.log(firstPostTitle); // undefined

// С существующим массивом
const userWithPosts: User = {
  name: "Bob",
  posts: [{ title: "Hello" }],
  getGreeting: () => "Hi!"
};

const firstPostTitle2 = userWithPosts.posts?.[0]?.title; // "Hello"
const greeting = userWithPosts.getGreeting?.(); // "Hi!"

// Проверка длины массива
const postsLength = user.posts?.length; // undefined
const postsLength2 = userWithPosts.posts?.length; // 1

// Фильтрация с опциональной цепочкой
const longTitles = user.posts?.filter(post => post.title.length > 10); // undefined

Важные моменты

Опциональная цепочка работает только для чтения свойств и вызова методов
Нельзя использовать с присваиванием: obj?.prop = value — это вызовет ошибку
Можно комбинировать: user?.posts?.[0]?.title?.toUpperCase()
Для массивов с необязательными элементами используйте Array<T | undefined>

Надеюсь, теперь стало понятнее! Если остались вопросы, пишите в комментариях.

<<>>

Альтернативный подход: оператор нулевого слияния (??) и логические проверки

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

Для массивов

// Проверка через Array.isArray и длину
const firstPost = Array.isArray(user.posts) && user.posts.length > 0 
  ? user.posts[0] 
  : undefined;

// С использованием оператора нулевого слияния
const firstPost = (user.posts ?? [])[0]; // Вернёт undefined, если posts отсутствует или пустой

Для функций

// Проверка через typeof
const fullName = typeof person.getFullName === 'function' 
  ? person.getFullName() 
  : undefined;

// С использованием логического И
const fullName = person.getFullName && person.getFullName();