8. Utility types

TypeScript: Броня. Урок 6: Utility Types

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

Что такое Utility Types?

Utility Types - это предопределенные типы в TypeScript, которые позволяют выполнять общие операции с типами, такие как создание типов, допускающих только для чтения свойства, или типов, делающих свойства необязательными. Их можно рассматривать как функции для типов.

Partial<Type>

Partial<Type> создает новый тип, в котором все свойства типа Type становятся необязательными.

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

// Все свойства UserPartial теперь необязательны
type UserPartial = Partial<User>;

const userPartial: UserPartial = {
  name: "John Doe",
}; // Корректно, так как name необязательное свойство

Required<Type>

Required<Type> делает все свойства типа Type обязательными. Это противоположность Partial<Type>.

interface UserPartial {
  id?: number;
  name?: string;
  email?: string;
}

// Все свойства UserRequired теперь обязательны
type UserRequired = Required<UserPartial>;

// const userRequired: UserRequired = {}; // Ошибка: Отсутствуют свойства 'id', 'name' и 'email'
const userRequired: UserRequired = {
  id: 1,
  name: "John Doe",
  email: "[email protected]",
}; // Корректно

Readonly<Type>

Readonly<Type> создает новый тип, в котором все свойства типа Type доступны только для чтения.

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

// Все свойства ReadonlyUser доступны только для чтения
type ReadonlyUser = Readonly<User>;

const readonlyUser: ReadonlyUser = {
  id: 1,
  name: "John Doe",
};

// readonlyUser.name = "Jane Doe"; // Ошибка: Невозможно назначить свойство 'name', так как оно доступно только для чтения.

Pick<Type, Keys>

Pick<Type, Keys> выбирает указанные свойства (Keys) из типа Type и создает новый тип, содержащий только эти свойства.

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

// UserWithoutEmail содержит только свойства id и name
type UserWithoutEmail = Pick<User, "id" | "name">;

const userWithoutEmail: UserWithoutEmail = {
  id: 1,
  name: "John Doe",
};

Omit<Type, Keys>

Omit<Type, Keys> исключает указанные свойства (Keys) из типа Type и создает новый тип, содержащий все свойства, кроме исключенных.

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

// UserWithoutEmail содержит только свойства id и email
type UserWithoutName = Omit<User, "name">;

const userWithoutName: UserWithoutName = {
  id: 1,
  email: "[email protected]",
};

Record<Keys, Type>

Record<Keys, Type> создает тип объекта, где ключи (Keys) имеют тип Type.

// Создаем тип, где ключи - строки, а значения - числа
type StringToNumberMap = Record<string, number>;

const stringToNumber: StringToNumberMap = {
  one: 1,
  two: 2,
};

Жизненный пример

В React часто используются Partial и Omit для работы с состояниями компонентов и пропсами.

interface Props {
    name: string;
    age: number;
    address?: string;
}

// Пример использования Partial:  Создаем тип для обновления пропсов
type UpdateProps = Partial<Props>;

// Пример использования Omit:  Создаем тип для пропсов без address
type RequiredProps = Omit<Props, 'address'>;

function MyComponent(props: Props) {
  // ...
}

В Redux Toolkit Partial используется для создания типов для обновления состояния reducer-а.

Ключевые моменты

• Utility Types экономят время и уменьшают дублирование кода.
• Они делают код более читаемым и поддерживаемым.
• Partial, Required, Readonly, Pick, Omit и Record - наиболее часто используемые Utility Types.
• Они широко применяются в популярных библиотеках и фреймворках.

Интерактивный пример