Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про TypeScript: typescript, utility types

Почему удобно использовать утилитные типы вместо создания новых интерфейсов?

Этот вопрос касается преимуществ утилитных типов в TypeScript по сравнению с созданием новых интерфейсов.

Короткий ответ

Утилитные типы удобны потому, что они экономят время, уменьшают количество кода и обеспечивают типобезопасность без дублирования. Они позволяют создавать производные типы на основе существующих, автоматически поддерживая синхронизацию при изменениях. Это делает код более поддерживаемым и менее подверженным ошибкам.

Длинный ответ

Утилитные типы в TypeScript предоставляют мощный способ манипуляции типами без создания избыточных интерфейсов.

Преимущества утилитных типов:

1. DRY (Don't Repeat Yourself):

// Вместо этого:
interface User {
  id: number;
  name: string;
  email: string;
  createdAt: Date;
}

interface UserUpdate {
  id?: number;
  name?: string;
  email?: string;
  createdAt?: Date;
}

// Используйте это:
interface User {
  id: number;
  name: string;
  email: string;
  createdAt: Date;
}

type UserUpdate = Partial<User>;

2. Автоматическая синхронизация:

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

// При изменении Product, ProductPreview автоматически обновится
type ProductPreview = Pick<Product, 'id' | 'name' | 'price'>;

// Пример использования
function displayProduct(preview: ProductPreview) {
  console.log(`${preview.name}: $${preview.price}`);
}

3. Гибкость и композиция:

// Комбинация утилитных типов
type ApiResponse<T> = {
  data: T;
  status: number;
  message: string;
};

type UserApiResponse = ApiResponse<User>;
type ProductApiResponse = ApiResponse<Product>;

// Более сложная композиция
type Editable<T> = Partial<T> & { id: number };
type UserEditable = Editable<User>;

Популярные утилитные типы:

Partial - все свойства опциональны:

type PartialUser = Partial<User>;
// { id?: number; name?: string; ... }

Required - все свойства обязательны:

type RequiredUser = Required<PartialUser>;
// { id: number; name: string; ... }

Pick - выбор конкретных свойств:

type UserPreview = Pick<User, 'id' | 'name'>;
// { id: number; name: string }

Omit - исключение свойств:

type UserWithoutId = Omit<User, 'id'>;
// { name: string; email: string; ... }

Readonly - свойства только для чтения:

type ReadonlyUser = Readonly<User>;
// { readonly id: number; readonly name: string; ... }

Практический пример:

// Для форм часто нужны частичные данные
type UserForm = Partial<Pick<User, 'name' | 'email'>>;

// Для API ответов - конкретный набор полей
type UserApi = Pick<User, 'id' | 'name'> & {
  profileUrl: string;
};

// Для внутренней логики - исключение чувствительных данных
type SafeUser = Omit<User, 'password' | 'token'>;

Уровень

  • Рейтинг:

    3

  • Сложность:

    5

Навыки

  • TypeScript

    TypeScript

Ключевые слова

#typescript

#utility types

Подпишись на React Developer в телеграм