Бесплатный курс по TypeScript. Зарегистрируйтесь для отслеживания прогресса →

TypeScript: Объединения (Union Types)

Объединение типов играют большую роль в TypeScript, они позволяют выразить обычную для JavaScript ситуацию, когда возвращаемое значение или аргумент функции могут быть различного типа. Например метод String.prototype.at() может возвращать значение типа string, либо undefined.

Объединение указывается с помощью оператора прямой черты |, по обе стороны которого располагаются типы. Давайте определим свой тип для функции at:

type at = (str: string, position: number) => string | undefined;

С точки зрения теории множеств, операция union обозначает объединение. Когда мы объединяем несколько множеств, получается новое множество, в которое входят все элементы исходных множеств.

Применительно к TypeScript это означает, что в результате мы получаем тип, обещающий содержать переменную одного из типов объединения. Так мы можем завести свой тип, под который попадают все строки ИЛИ числа:

type NumberOrString = number | string;

let val: NumberOrString = 10; // OK
val = 'My string'; // OK
val = true; // Type 'boolean' is not assignable to type 'NumberOrString'.

На практике нередко встречаются случаи, когда нам нужно поддержать работу функции с большим количеством типов. В JavaScript мы можем соединить строку не только со строкой, но и числом, булевыми значениями и не только. Для решения похожей задачи в прошлых уроках мы познакомились с перегрузкой функции. Опишем тип такой функции с применением пересечения:

type AllowedToConcatenation = number | string | null | undefined | boolean;

const concat = (base: AllowedToConcatenation, suffix: AllowedToConcatenation): string => `${base}${suffix}`;

Для описания типов функции concat нам бы потребовалось написать код для каждого случая отдельно.

Union Types используется повсеместно, где программист хочет сказать, что переменная может содержать значения разных, но заранее описанных типов. Для указания абсолютно произвольных типов может использоваться unknown или более конкретные дженерики, которые рассмотрим дальше в курсе.

Задание

Реализуйте функцию lastIndex(str, char), возвращающую индекс последнего вхождения символа в строку или null, если такого символа нет.

const str = 'test';
lastIndex(str, 't'); // 3
lastIndex(str, 'p'); // null
Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе