TypeScript Academy · Урок

Условные типы на уровне типов

Создавайте ветвления по типам с помощью выражений условных типов

«Условные типы на уровне типов» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Условный оператор на уровне типов

Язык типов получает ветвление с помощью условных типов. Синтаксис T extends U ? X : Y читается так: если T совместим с присваиванием U, результатом будет X, иначе — Y.

На уровне типов это эквивалент условного выражения if / else.

type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<string>; // "yes"
type B = IsString<number>; // "no"

extends означает совместимость при присваивании

Здесь проверяется не равенство. Условие T extends U истинно, когда значение типа T можно использовать там, где ожидается U. Литеральные типы совместимы с присваиванием их базовому типу.

type T1 = "hello" extends string ? true : false; // true
type T2 = string extends "hello" ? true : false; // false
type T3 = 42 extends number ? true : false;       // true

Выбор результирующего типа

Условные типы позволяют одному обобщённому типу возвращать разные формы в зависимости от входных данных. Здесь Wrap по-разному оборачивает массивы и отдельные значения.

type Wrap<T> = T extends unknown[]
  ? { list: T }
  : { value: T };

type A = Wrap<number>;   // { value: number }
type B = Wrap<string[]>; // { list: string[] }

Фильтрация до never

Распространённый приём — вернуть never в одной из ветвей. never означает «нет значения» и полезен для последующего удаления элементов из объединений.

type OnlyStrings<T> = T extends string ? T : never;

type A = OnlyStrings<string>; // string
type B = OnlyStrings<number>; // never

Выведение типов с помощью infer

Настоящая сила проявляется при использовании ключевого слова infer. Внутри условного типа infer вводит новую переменную типа, которая захватывает часть сопоставленного типа.

Здесь мы захватываем тип элементов массива.

type ElementType<T> = T extends (infer U)[] ? U : never;

type A = ElementType<number[]>; // number
type B = ElementType<string[]>; // string

Выведение результатов функций

Поместить infer можно в любое место шаблона. Чтобы извлечь тип возвращаемого значения функции, выведите часть после стрелки. Именно так работает встроенная конструкция ReturnType.

type MyReturn<T> = T extends (...args: any[]) => infer R ? R : never;

type A = MyReturn<() => number>;      // number
type B = MyReturn<(x: string) => boolean>; // boolean

Выведение нескольких частей

Один условный тип может одновременно ввести несколько переменных infer. Здесь мы извлекаем первый элемент и оставшуюся часть кортежа.

type FirstRest<T> = T extends [infer H, ...infer R]
  ? { head: H; rest: R }
  : never;

type A = FirstRest<[1, 2, 3]>;
// { head: 1; rest: [2, 3] }

Вложенные условные типы

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

type Describe<T> =
  T extends string ? "text" :
  T extends number ? "num" :
  T extends boolean ? "flag" :
  "other";

type A = Describe<number>; // "num"
type B = Describe<null>;   // "other"

Условия как проверки

Используйте условный тип, чтобы проверить структуру перед извлечением данных из неё. Если входные данные не подходят, верните never, чтобы неправильное использование стало заметным.

type GetName<T> = T extends { name: infer N } ? N : never;

type A = GetName<{ name: string }>; // string
type B = GetName<{ age: number }>;  // never

Объединение условий

Потребовать выполнения нескольких условий можно с помощью вложенности. Здесь тип должен одновременно быть объектом и иметь id, чтобы пройти проверку.

type RequireId<T> =
  T extends object
    ? T extends { id: unknown } ? T : never
    : never;

type A = RequireId<{ id: 1; x: 2 }>; // { id: 1; x: 2 }
type B = RequireId<{ x: 2 }>;        // never

Условные типы повсюду

Большинство встроенных вспомогательных типов внутри являются условными: NonNullable, Extract, Exclude, Parameters и ReturnType. Понимание конструкции extends ? : открывает доступ ко всем им.

type MyNonNullable<T> = T extends null | undefined ? never : T;

type A = MyNonNullable<string | null>; // string

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете условные типы и infer.

Итоги

Условные типы добавляют языку типов конструкцию if/else и сопоставление с шаблоном.

T extends U ? X : Y выбирает ветвь на основе совместимости при присваивании.
infer захватывает сопоставленные части в новых переменных.
Условные типы можно вкладывать, образуя лестницы решений.
Возврат never фильтрует элементы.

Далее: рекурсивный вызов условного типа из него самого для создания рекурсии.

Часто задаваемые вопросы

Урок «Условные типы на уровне типов» бесплатный?

Да — полный текст урока «Условные типы на уровне типов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Условные типы на уровне типов»?

Создавайте ветвления по типам с помощью выражений условных типов Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Условные типы на уровне типов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к TypeScript Academy