Расширение типа Event в TypeScript: добавляем свойство UserId

Быстрый ответ

Для того чтобы расширить типы в TypeScript, примените интерфейсы через наследование и псевдонимы типов, создавая пересечения:

// Расширение интерфейса
interface Base { a: number; }
interface Extended extends Base { b: string; }

// Расширение псевдонима типа
type BaseType = { a: number; }
type ExtendedType = BaseType & { b: string; };

Теперь и Extended, и ExtendedType включают в себя свойства a: number и b: string, обогатив свою структуру общими атрибутами.

Изучим возможности расширения

Подход первый: Использование интерфейсов

Интерфейсы идеально подходят для объединения типов благодаря наследованию с использованием ключевого слова extends:

// Использование интерфейса как базы
interface User { id: number; }
interface Author extends User { articles: string[]; } // Авторам тоже нужен ID!

Наследование интерфейсов друг от друга упрощается с помощью extends.

Подробнее об этом расскажет наш спикер на видео

Подход второй: Использование псевдонимов типов

В отличие от интерфейсов, псевдонимы типов не поддерживают объединение объявлений. Однако, с помощью пересечения типов и оператора & можно добиться очень похожего эффекта:

// Тип пользователя
type User = { id: number; }
// Собственный образ автора через '&'
type Author = User & { articles: string[]; } // '&': как волшебный мир авторства!

Выход за рамки простого: Расширение сложных типов

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

type UserEvent = Event & { userId: string; } // И вуаля, добавлен userId!

Визуализация

Представьте типы TypeScript как сборку пазла:

🔵 (Тип A): [Свойство1, Свойство2]
🔴 (Тип B): [Свойство2, Свойство3]

Создание нового комбинированного типа – это словно созидание шедевра из пазловых элементов:

🔵 + 🔴 = 🟣 (Тип C)

Тип C наследует лучшие свойства от Типа А и Типа Б:

🟣 (Тип C): [Свойство1, Свойство2, Свойство3]

Продвинутые советы и хитрости

Опасайтесь конфликтов имен

При наследовании свойств убедитесь, что имена уникальны или что типы совпадают. В противном случае TypeScript выдаст ошибку:

type A = { x: string; }
type B = { x: number; }
// Ой, 'x' встречается дважды
type C = A & B;

Дилемма 'extends'

Обычное наследование с extends недоступно для псевдонимов типов. В таких случаях лучше использовать интерфейсы или пересечение типов.

Выбор между встроенными типами и интерфейсами

В TypeScript иногда проще определить интерфейс, а по другим случаям — лучше применить встроенный тип. Если тип используется многократно или требуется наследование, удобнее выбирать интерфейсы.

Полезные материалы

1. TypeScript: Документация – Объектные типы – Отличная отправная точка для изучения объектных типов в TypeScript.
2. TypeScript Deep Dive: Интерфейсы – Углубленное изучение интерфейсов в TypeScript и способов их расширения.
3. TypeScript: Документация – Совместимость типов – детальное руководство по основам совместимости типов в TypeScript.
4. typescript-cheatsheet – Справочник для усвоения ключевых моментов TypeScript.
5. 10++ советов и шаблонов TypeScript для профессионалов с React или без – Полезно не только тем, кто использует React, но и тем, кто предпочитает другие инструменты.