Ключевое слово infer

На тайпскрипте я пишу давно, но какие-то сложные типы практически не пишу. Про infer я слышал, и много месяцев откладывал пятиминутное прочтение статьи, чтобы разобраться, как он работает 😄.

В итоге разобрался только во время доклада на Я 💛 Фронтенд — Антология полезностей в TypeScript .

Условные типы

infer неотрывно связан с условными типами, поэтому начнём с них. По сути это тернарный оператор, который применяется не к переменным, а к типам.

Простой пример типа ToArray. Если мы передали тип-массив — условие extends any[] выполняется и возвращается тот же тип T, иначе создаём массив типа — T[]

`type ToArray = T extends any[] ? T : T[];

type NumberArray = ToArray; // number[] type StringArray = ToArray; // string[]

infer

Если вы знаете английский, то поняли, что тут пойдёт речь про вывод типов. Вообще, про infer удобно думать как об объявлении переменной, где тип будет выведен автоматически. То есть, TypeScript думает, можно ли что-то подставить в наше условие, чтобы оно выполнялось, если можно — выводит тип и кладёт в переменную.

Теперь попробуем решить задачу обратную ToArray — будем определять тип элемента в массиве.

`type ArrayItem = T extends (infer Item)[] ? Item : T;

type NumberItem = ArrayItem // number type StringItem = ArrayItem; // string

Тут мы просто заменяем any на infer Item, что означает: "выведи тип" и положи его в переменную тип с именем Item. И дальше просто используем Item.

Также infer работает с шаблонно-литеральными типами, вот так, например, можно вывести имя БЭМ-блока по элементу или модификатору

type BemBlock = T extends${infer Block}${string}? Block : T extends${infer Block}${string}--${string}` ? Block : never

type Block1 = BemBlock<"login-page__form"> // login-page type Block2 = BemBlock<"login-page__user--active"> // login-page

Ещё по теме: - Вывод типов в TypeScript с использованием конструкции as const и ключевого слова infer - TypeScript: infer и conditional types. Продвинутый TS на примерах