0Pricing
Frontend Academy · Урок

Отображаемые и условные типы

Создавайте отображаемые типы для преобразования всех свойств типа и используйте условные типы с infer для сложной логики на уровне типов.

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

Отображаемые типы — преобразование каждого свойства

Отображаемые типы перебирают ключи типа и преобразуют их. Они лежат в основе типов-утилит Partial, Readonly и Record.

// Partial implemented as a mapped type:
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// Readonly:
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

Переименование ключей с помощью as

Используйте as в предложении отображения, чтобы переименовывать ключи. Для мощных преобразований сочетайте этот приём с типами шаблонных литералов.

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }

Фильтрация свойств с помощью never

Возвращайте never при переименовании ключа, чтобы удалить это свойство из результирующего типа.

// Keep only function-valued properties:
type FunctionProperties<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K];
};

Условные типы — if/else для типов

Условные типы используют шаблон T extends U ? TrueType : FalseType. Они вычисляются на уровне типов, а не во время выполнения.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>;       // number

Распределяемые условные типы

Когда T является объединением, условные типы распределяются по каждому элементу. string | number extends string ? ... проверяет их отдельно: (string extends string ? ...) | (number extends string ? ...).

type ToArray<T> = T extends any ? T[] : never;

type StringOrNumberArray = ToArray<string | number>;
// string[] | number[]  (not (string | number)[])

Использование infer для извлечения типов

infer R вводит переменную типа, значение которой заполняет TypeScript. Это позволяет захватывать части структуры типа.

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>;             // number

Типы шаблонных литералов

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

type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

Сочетание отображаемых и условных типов

Самые мощные шаблоны TypeScript сочетают оба подхода. Встроенные типы required, partial, readonly и record являются отображаемыми типами.

// Make all functions in an object async:
type Asyncify<T> = {
  [K in keyof T]: T[K] extends (...args: infer A) => infer R
    ? (...args: A) => Promise<R>
    : T[K];
};

DeepPartial — рекурсивный служебный тип

Встроенный тип Partial работает только на одном уровне. DeepPartial рекурсивно обходит вложенные объекты.

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

Практическое применение: типы ответов API

Отображаемые и условные типы позволяют создавать мощные производные типы API — например, извлекать из объекта только свойства, сериализуемые в JSON.

Избегайте избыточного усложнения

Сложные манипуляции с типами могут затруднить понимание кода. Всегда спрашивайте себя: будет ли понятнее использовать более простой псевдоним типа или интерфейс? Типы должны описывать замысел, а не демонстрировать мастерство владения TypeScript.

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

Во что вычисляется T extends U ? A : B, если T является объединением типов?

Итоги: отображаемые и условные типы

Отображаемые типы перебирают ключи с помощью [K in keyof T]. Используйте as для переназначения ключей. Возвращайте never для фильтрации. Условные типы: T extends U ? A : B. infer извлекает переменные типов. Шаблонные строковые типы создают объединения строк. Объединяйте эти возможности для мощных преобразований типов, таких как DeepPartial и Asyncify.

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

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

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

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

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

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

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

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

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

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

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

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

  1. Обобщения: T extends и ограничения
  2. Вспомогательные типы: Partial, Required, Pick и Omit
  3. Отображаемые и условные типы
  4. Сужение типов: typeof, instanceof и дискриминируемые объединения
← Назад к Frontend Academy