Введение в отображаемые типы

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

Они особенно полезны для создания гибких и пригодных для повторного использования структур типов в TypeScript.

Что такое отображаемые типы?

В отображаемых типах используется такой синтаксис, как { [P in keyof T]: T[P] }, для перебора свойств типа T.

Базовый пример отображаемых типов

Вот простой пример использования отображаемого типа для создания версии типа, доступной только для чтения:

type User = {
  name: string;
  age: number;
};

type ReadonlyUser = {
  readonly [P in keyof User]: User[P];
};

Использование встроенных отображаемых типов

TypeScript предоставляет несколько встроенных отображаемых типов, например:

• Readonly<T>: делает все свойства T доступными только для чтения.
• Partial<T>: делает все свойства T необязательными.
• Required<T>: делает все свойства T обязательными.

type User = {
  name: string;
  age: number;
};

// Example of Partial
const user: Partial<User> = {
  name: 'John',
};

Отображение объединений

Отображаемые типы также можно использовать с типами-объединениями для создания новых объединённых типов:

type Status = 'active' | 'inactive';

type StatusFlags = {
  [K in Status]: boolean;
};

const flags: StatusFlags = {
  active: true,
  inactive: false,
};

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

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

type User = {
  name: string;
  age?: number;
};

type NonOptional<T> = {
  [K in keyof T]-?: T[K];
};

type RequiredUser = NonOptional<User>;

Расширенный пример: исключение свойств

Вот как можно создать отображаемый тип для исключения определённых свойств:

type User = {
  id: number;
  name: string;
  password: string;
};

type PublicUser = {
  [K in keyof User as Exclude<K, 'password'>]: User[K];
};

Практическое задание

Создайте отображаемый тип, который добавляет модификатор readonly ко всем свойствам типа Product. Проверьте его, объявив переменную нового типа.

Поздравляем!

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