В этом уроке мы познакомимся с Utility Type Extract<T, U>. Это зеркальное отражение типа Exclude. Если Exclude «вычитает» типы, то Extract, наоборот, «оставляет» только те типы из объединения T, которые присутствуют (являются подтипом) в U.
Синтаксис: type Result = Extract<SourceUnion, Filter>.
Зачем это нужно?
Это полезно для поиска общих элементов между двумя типами или для фильтрации union-типов, чтобы оставить только определенное подмножество (например, выделить из списка всех событий только события мыши, если они имеют общую базу).
- Оставляет общие типы.
- Удаляет всё, что НЕ подходит под условие U.
Выполните задания, чтобы понять принцип работы «пересечения» типов.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Exclude.
- Extract.
- NonNullable.
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Результат извлечения
Проанализируйте приведённый фрагмент кода на TypeScript. В нём определены два union-типа и применён утилитный тип Extract. Выберите, какой тип будет присвоен результирующему псевдониму C в результате этой операции.
type A = 'admin' | 'user' | 'guest' | 'moderator';
type B = 'user' | 'moderator' | 'editor';
type C = Extract<A, B>;2. Синтаксис Extract
В этом задании вам нужно использовать Utility Type `Extract` для извлечения определённых типов из объединения (union). Дополните код, вставив пропущенные элементы: ключевое слово `Extract` и закрывающую угловую скобку дженерика. После правильного заполнения тип `Pet` должен быть равен `'cat' | 'dog'`.
type Animal = 'cat' | 'dog' | 'bird';
type Pet = input1S<Animal, 'cat' | 'dog'input2S; // "cat" | "dog"
3. Визуализация пересечения
Перед вами фрагмент кода на TypeScript, демонстрирующий использование Utility Type Extract. Исходный union-тип состоит из пяти элементов. Внимательно изучите код и условие применения Extract. Ваша задача — кликнуть на те элементы исходного union-типа (первая строка), которые останутся в результате его работы. Не отмечайте элементы из второго аргумента Extract (вторая строка) и не отмечайте элементы, которые не входят в пересечение.
type Original = {{'string'~|~t1}} | {{'number'~|~t2}} | {{'boolean'~|~t3}} | {{'null'~|~t4}} | {{'undefined'~|~t5}};
type Extracted = Extract; 4. Фильтрация событий
Из предложенных строк соберите корректную TypeScript-программу, которая создаёт тип `MouseEvents` из общего списка событий, используя Utility Type `Extract`. Программа должна определить тип событий мыши, функцию для обработки такого события и вызвать её с аргументом 'click'. Лишние строки, связанные с событиями клавиатуры, в решение включать не нужно.
type Event = 'click' | 'dblclick' | 'mousemove' | 'keydown' | 'keyup';type MouseEvents = Extract<Event, 'click' | 'dblclick' | 'mousemove'>;function handleMouseEvent(event: MouseEvents) { console.log(event);}handleMouseEvent('click');type KeyboardEvents = Extract<Event, 'keydown' | 'keyup'>;const x: Event = 'keydown';5. Выбор фильтра
В данном задании вам предстоит использовать утилитный тип TypeScript Extract для фильтрации union-типа. В коде ниже объявлен тип MyUnion, представляющий собой объединение string, number и boolean. С помощью Extract необходимо получить тип, содержащий только number. Для этого заполните пропуск в коде, выбрав подходящий тип из выпадающего списка. Обратите внимание на синтаксис использования Extract и на то, какой тип должен быть извлечен.
type MyUnion = string | number | boolean;
type OnlyNumber = Extract<MyUnion, input1S>;
const num: OnlyNumber = 100;6. Extract vs Exclude
Сопоставьте выражения, использующие утилиты типов `Extract` и `Exclude`, с результирующими типами. В левой колонке приведены примеры использования этих утилит, а в правой — возможные результирующие типы. Обратите внимание, что оба утилитных типа работают с объединениями (union types), но `Extract` извлекает общие части, а `Exclude` — исключает. Для каждого выражения слева выберите соответствующий тип справа.
Extract<'a' | 'b' | 'c', 'a' | 'b'>Extract<'a' | 'b' | 'c', 'b' | 'c' | 'd'>Exclude<'a' | 'b' | 'c', 'a' | 'b'>Exclude<'a' | 'b' | 'c', 'b' | 'c' | 'd'>'b' | 'c''a' | 'b''a''c'7. Ошибка в логике
В этом фрагменте кода TypeScript разработчик хотел получить тип, содержащий только строки из объединения типов, но допустил ошибку в использовании Utility Type Extract. Найдите и исправьте ошибку в строке с Extract, чтобы тип StringsOnly действительно содержал только строки.
// Определяем union-типtype AllTypes = string | number | boolean;// Извлекаем только строкиtype StringsOnly = Extract<AllTypes, number>;