Изучаем TypeScript. Введение в TS Compiler API #0
Привет, на связи Antihype JS. Это первая статья о возможностях компилятора TypeScript. Цель статьи - познакомить читателя с концепцией custom transformers. В первую очередь статья будет интересна людям, которым интересно разобраться как работает под капотом однин из самых популярных инструментов во Frontend разработке.
TypeScript — язык программирования, представленный Microsoft в 2012 году и позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript
Для начала давайте вспомним что нам необходимо для того чтобы использовать TypeScript в нашем проекте.
Чтобы использовать TS нам конечно-же понадобится Node.js на нашей машине и установленный из npm пакет typescript. Шаблонный tsconfig генерируется с помощью команды:
Для компиляции нашего проекта достаточно одной команды:
Однажды я задумался, если TypeScript поставляется как npm пакет, то наверное из него можно что-то импортировать? Спойлер - да, и это открывает для нас необычные возможности TS. Одна из фичей, которые меня особенно заинтересовала - это custom transformers.
В TypeScript версии 2.3 появилась поддержка пользовательских трансформеров AST. С помощью них возможно перенести существующие Babel плагины в TS и в полной мере использовать мощь статической типизации.
Крутым примером подобных плагинов является пакет @wessberg/di. Это compile-time DI контейнер, который позволяет внедрять зависимости в ваш код используя интерфейсы TypeScript.
Пример из документации пакета:
Чтобы лучше понять как использовать кастомные трансформеры, давайте напишем бойлерплейт код для работы со сборкой нашего проекта:
Из декларации типов функции program.emit видно, что последним аргументом как раз и являются наши custom transformers:
На примере выше вышеупомянутого @wessberg/di подключение в наш бойлерплейт код будет выглядеть очень просто:
Компилятор TypeScript дает нам с вами 3 вида возможных трансформаций:
- before - запускаются до преобразования TS в JS. На вход получают AST на основе исходного кода вашего проекта.
- after - запускаются после преобразования TS в JS. На вход получают обработанный компилятором код.
- afterDeclarations - запускаются на этапе генерации .d.ts файлов. На этом этапе можно преобразовывать декларации типов.
Как правило, большинство плагинов работают на этапе before.
Еще один интересный плагин позволяет удалять data-test-id атрибуты из React компонентов на этапе компиляции. Это будет полезно при сборке в продакшен, ведь наше приложение уже прошло этап автоматического тестирования.
Это все конечно интересно, но мне не совсем понятно как именно происходит модифицирование исходного кода с помощью плагинов..
Ответить на этот вопрос поможет схема работы компилятора TS. Схема представлена в общем виде, без лишних подробностей:
- Исходный код - входными данными для компилятора является наш файл с исходным кодом программы.
- Лексический анализ - компилятор преобразует текст программы в поток токенов. По сути, токен - это описание конструкций языка в виде объекта. Например: ключевые слова, фигурные/круглые скобки, операторы.
Синтаксический анализ - на этом этапе происходит формирование абстрактного синтаксического дерева (AST) и проверка программы на корректность.
- Этап генерации - генерация выходных .js файлов, .d.ts файлов с описанием типов и sourcemap файлов.
Custom transformers (с before типом трансформации) включаются в игру после этапа синтаксического анализа и работают напрямую с AST TypeScript. Дерево можно каким угодно образом изменять, добавлять новый код или удалять существующий.
Чтобы просмотреть AST на основе вашего кода, можно также воспользоваться различными онлайн сервисами, например ts-ast-viewer:
На сегодня это все. Остаемся на связи и увидимся в следующей части.
Пример проекта с бойлерплейт скриптом сборки можно найти на GitHub.
Также подпишитесь на наш канал, там мы пишем и общаемся про frontend и все что с ним связано.
Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?
Хотелось бы посмотреть пример написания собственного плагина 🤔
в следующей части
все из JavaScript пытаются Java сделать. Типизацию сделали в TS скоро компилировать начнут
Крутой материал, спасибо
Спасибо за статью и созрел вопрос, как подключить custom transformer, если у меня сборка на webpack?
в ts-loader есть опция getCustomTransformers