​TypeScript. Ключевое слово infer

Весь вечер пытаюсь разобраться с ключевым словом infer в TypeScript 🙂 Не сказать, что концепция самая очевидная, но вроде и не чрезмерно сложная, если я, конечно, все правильно понимаю.

Итак, infer может "выводить" один тип на основании другого. Использовать это ключевое слово можно только в условных конструкциях вместе с extend. Выведенный тип затем можно использовать, например, вернуть из условной конструкции.

Подробнее об условных типах: https://yangx.top/react_junior/431

Самый понятный для меня (но вероятно не самый популярный) пример использования infer - на приложенном скрине (взято со StackOverflow).

Утилита UnpackArrayType получает обобщенный тип T.
Затем ставится условие:


T extends (infer R)[]


Эта конструкция буквально означает, "можно ли представить T в виде массива элементов какого-нибудь типа R". При этом тип R буквально "выводится" из типа T с помощью infer. Если T равно number[], то R будет равно number.

Если условие получилось выполнить, возвращается свежевыведенный тип R.

Неплохой разбор infer есть в статье Understanding infer in TypeScript (англ.)

Там автор начинает с более простых концепций: типа never, оператора extends, объединений, а затем переходит к работе с функциями и собственно ключевому слову infer.

К слову, именно infer лежит в основе работы утилиты ReturnType.

В конце статьи приводяется некоторые популярные кейсы использования infer, например, выведение возвращаемого типа из промиса.

#ссылки #typescript #подкапотом #infer

​Статья (англ.): https://levelup.gitconnected.com/using-typescript-infer-like-a-pro-f30ab8ab41c7

Еще немного про infer (начало здесь)

В статье приводится очень хорошее пошаговое объяснение того, как работает это ключевое слово.

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

Рассматривается тот же пример с распаковкой массива и получением типа элемента (только подробнее и с анимацией).
Кроме того есть примеры с распаковкой аргументов и возвращаемого значения функций (так работает под капотом утилита ReturnType) и распаковкой ключей объекта.

Важно помнить, что infer может использоваться только в условных типах (`extends`) и после "захвата" доступен только в true-части выражения.

Во второй части статьи рассматриваются тонкости работы ключевого слова infer, например, при множественных типах (иногда в результате получается объединение типов, а иногда пересечение), а также сочетание нескольких условий.

В конце задачка, которая сломала мой мозг 🤯

#typescript #infer

По TypeScript получилось довольно много материала (и еще будет 😄), поэтому добавлены новые теги для сложных тем: #infer, #дженерики и #tsдекораторы
Все теги тут: https://yangx.top/react_junior/84

Не могу удержаться и не поделиться) Вчера впервые потребовалось использовать infer в боевых условиях: https://telegra.ph/Infer-v-TypeScript-primer-ispolzovaniya-01-21

Ни на что не претендую, просто небольшой пример практического применения не самой простой концепции.

#примерыкода #typescript #infer