0Pricing
Frontend Academy · Урок

Вспомогательные типы: Partial, Required, Pick и Omit

Преобразуйте существующие типы встроенными вспомогательными типами, создавая их варианты без дублирования.

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

Встроенные типы-утилиты

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

Partial<T>

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

interface User { name: string; email: string; age: number; }

function updateUser(id: string, changes: Partial<User>) {
  // changes.name is string | undefined
  // changes.email is string | undefined
}

updateUser('1', { name: 'Bob' }); // only update name

Required<T>

Противоположность Partial: делает все свойства обязательными, удаляя модификаторы необязательности (?).

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

function validate(config: Required<Config>) {
  // All three are now required
  console.log(config.host, config.port, config.debug);
}

Pick<T, K>

Создаёт тип только с указанными свойствами из T. Полезен для сокращения крупных объектов до нужных полей.

interface User { id: number; name: string; email: string; password: string; }

type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to client

Omit<T, K>

Создаёт тип, из которого удалены указанные свойства. Это обратная операция по отношению к Pick.

type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }

type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yet

Readonly<T>

Делает все свойства доступными только для чтения и запрещает их переназначение. Полезен для объектов конфигурации и неизменяемых данных.

const config: Readonly<Config> = {
  host: 'localhost',
  port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-only

Record<K, V>

Создаёт тип объекта с ключами типа K и значениями типа V. Это понятнее, чем необработанная сигнатура индекса, когда ключи представляют известное объединение.

type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;

const perms: Permissions = {
  admin:  { canEdit: true,  canDelete: true  },
  editor: { canEdit: true,  canDelete: false },
  viewer: { canEdit: false, canDelete: false },
};

ReturnType<T> и Parameters<T>

Извлекают возвращаемый тип и типы параметров типа функции. Это полезно, когда вы не можете импортировать тип, но должны сопоставить сигнатуру функции.

function fetchUser(id: number) {
  return { id, name: 'Alice' };
}

type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]

Awaited<T>

Извлекает из типа Promise тип его разрешённого значения. Полезен при работе с асинхронными функциями.

type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise

async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }

Extract<T, U> и Exclude<T, U>

Extract<T, U> оставляет только типы в T, совместимые с U. Exclude<T, U> удаляет их.

type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>;       // 'a' | 'd'

// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // string

Композиция типов-утилит

Типы-утилиты можно комбинировать для создания точных типов.

type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional

function patch(id: string, data: UpdatePayload<User>) {
  // data can have any subset of mutable user fields
}

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

Какой тип-утилита удаляет указанные ключи из интерфейса?

Итоги: типы-утилиты

Partial делает все поля необязательными. Required удаляет модификаторы необязательности. Pick сохраняет выбранные ключи. Omit удаляет выбранные ключи. Readonly запрещает изменение. Record сопоставляет ключи объединения со значениями. ReturnType и Parameters извлекают типы функции. Комбинируйте утилиты для создания точных типов DTO.

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

Урок «Вспомогательные типы: Partial, Required, Pick и Omit» бесплатный?

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

Чему я научусь в уроке «Вспомогательные типы: Partial, Required, Pick и Omit»?

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

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

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

Сколько времени занимает урок «Вспомогательные типы: Partial, Required, Pick и Omit»?

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

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

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

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

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