Использование Babel с TypeScript

Babel vs tsc для TypeScript

При создании современного проекта на JavaScript вы можете задаться вопросом, каким образом лучше всего преобразовать файлы из TypeScript в JavaScript?

Часто ответ — «зависит от ситуации» или «за вас уже принято решение», в зависимости от проекта. Если вы создаёте проект с использованием существующего фреймворка, например, tsdx, Angular, NestJS или любого фреймворка, упомянутого в разделе Начало работы, то это решение уже принято за вас.

Однако полезным эвристическим правилом может быть следующее:

• Если выходной билд-результат в основном совпадает с исходными файлами? Используйте tsc
• Нужно ли вам конвейер сборки с несколькими потенциальными выходными данными? Используйте babel для транспиляции и tsc для проверки типов

Babel для транспиляции, tsc для типов

Этот подход часто используется в проектах, имеющих существующую инфраструктуру сборки, которые могли быть перенесены из кодовой базы JavaScript в TypeScript.

Этот метод представляет собой гибридный подход, использующий пресет Babel preset-typescript для генерации JS-файлов, а затем TypeScript для проверки типов и генерации файлов .d.ts.

Использование поддержки TypeScript в Babel позволяет работать с существующими конвейерами сборки и, скорее всего, ускорит время выдачи JS, поскольку Babel не проверяет типы вашего кода.

Проверка типов и генерация файлов d.ts

Недостатком использования Babel является то, что проверка типов не выполняется во время перехода от TS к JS. Это может означать, что ошибки типов, которые вы упустили в редакторе, могут проникнуть в производственный код.

Кроме того, Babel не может создавать файлы .d.ts для вашего TypeScript, что может затруднить работу с проектом, если это библиотека.

Для решения этих проблем вам, вероятно, потребуется настроить команду для проверки типов вашего проекта с помощью TSC. Вероятно, это потребует дублирования части вашей конфигурации Babel в соответствующий tsconfig.json и обеспечения включения следующих флагов:

"compilerOptions": {
  // Ensure that .d.ts files are created by tsc, but not .js files
  "declaration": true,
  "emitDeclarationOnly": true,
  // Ensure that Babel can safely transpile files in the TypeScript project
  "isolatedModules": true
}

Дополнительную информацию об этих флагах вы можете найти по следующим ссылкам:

• isolatedModules
• declaration, emitDeclarationOnly