strokoff 16 Января 2023 в 9:48

Typescript или Babel?

Разделение кода широко используется в веб-разработке на основе JavaScript для повышения производительности и удобства поддержания кода по мере роста. Однако возникает необходимость объединить и транспилировать эти файлы при их выполнении.

При сборке проекта создается набор оптимизированных файлов путем сокращения и минификации фрагментов кода, а транспилятор преобразут все новые синтаксисы и функции JavaScript в синтаксис ES5 (или в выбранную вами ES версию), чтобы сделать их обратно совместимыми со старыми браузерами.

TypeScript и Babel — два наиболее часто используемых инструмента для транспиляции и полифиллинга. В этой статье мы обсудим различия между ними и поможем выбрать лучший для вашего проекта.

Что такое TypeScript?

TypeScript — один из самых популярных языков программирования среди веб-разработчиков. Он работает как слой линтинга поверх JavaScript и применяет типы, чтобы помочь разработчикам свести к минимуму распространенные ошибки.

Самое главное, что у TypeScript есть собственный компилятор. В результате он может преобразовывать файлы .ts в файлы .js и упрощает их выполнение браузерами.

Что такое Babel?

Babel — еще один популярный компилятор, который преобразует современный синтаксис и функции JavaScript в ES5+. Он имеет важные функции, такие как преобразование синтаксиса, полифиллинг, минификация кода.

Из них полифиллинг — одна из самых ценных функций, и она гарантирует, что ваше приложение будет универсально совместимо с различными версиями браузера.

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

Подробнее о различиях

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

1. Проверка типов недоступна в Babel

Typescript строго типизирован. Это означает, что разработчики могут проверять правильность значений своих переменных. При этом Babel компилирует код без проверки типов.

var typeCheckString : string = 11111;

Приведенный выше код скомпилируется в Babel без каких-либо ошибок. Но в TypeScript вы увидите ошибку типа, как показано ниже:

Когда типы неправильно инициализированы, удаление типов и компиляция кода — это быстрый способ создать JS. Но если разработчикам нужно использовать правильные типы, важно их перепроверить.

Так как Babel не проверяет ваш код, у него более быстрое время генерации. Однако вы также можете настроить TypeScript без проверки типов, запустив команду tsc — noEmit.

2. Auto polyfill недоступен в TypeScript

Babel включает в себя полифилл, который имеет собственную среду выполнения регенератора и core-js. Это будет эмулировать полную среду ES5+ для использования в приложениях, а не в библиотеке/инструменте. Итак, полифил автоматически загружается при использовании Babel.

TypeScript только понижает некоторые языковые функции при нацеливании на более ранние версии ECMAScript. Синтаксис — это основная норма, используемая для определения того, будет ли функция выдаваться как код пониженной версии или для нее требуется полифилл. Если новая языковая функция синтаксически недействительна в текущей версии JS, она будет понижена или вы получите предупреждение во время компиляции.

3. Babel более расширяемый, чем TypeScript

Если вам нужно использовать пользовательское преобразование, Babel — лучшее решение. Он поддерживает множество плагинов для оптимизации вашего кода, в то время как TypeScript поддерживает только собственный Transformer API с меньшими возможностями.

Например, @babel/preset-env. Плагин позволит вам использовать последнюю версию JavaScript без необходимости микроуправления тем, какие преобразования синтаксиса (и, возможно, полифиллы браузера) необходимы вашей целевой среде. @babel/preset-env берет любые указанные вами параметры и сравнивает их со своими сопоставлениями, чтобы получить список подключаемых модулей и передать его в Babel. Чаще всего используют файл .browserslistrc, для указания параметров.

По умолчанию @babel/preset-env будет использовать источники конфигурации списка браузеров, если не установлены параметры target или ignoreBrowserslistConfig.

Например, чтобы включить только полифиллы и преобразования кода, необходимые для пользователей, чьи браузеры имеют долю рынка > 0,25% (игнорируя браузеры без обновлений безопасности, такие как IE 10 и BlackBerry):

{
    "presets": [
        ["@babel/preset-env", { "useBuiltIns": "entry", "corejs": "3.22" } ]
    ]
}

Также, если вы всё-таки решили использовать и TypeScript и Babel, стоит обратить внимание на @babel/preset-typescript.

4. Использование декораторов

Поддержка декораторов — одна из основных функций TypeScript. Однако предложение декоратора для JavaScript еще не завершено, и существуют некоторые несоответствия между спецификацией ECMAScript и TypeScript в отношении поведения декоратора.

Таким образом Babel не компилирует декораторы, подобные TypeScript, и нам приходится использовать устаревший режим. Устаревший режим будет компилировать декораторы со старым поведением, и нам нужно использовать плагин @babel/plugin-proposal-decorators и установить для параметра legacy значение true в файле конфигурации.

5. Идентичная производительность

Что касается производительности, то TypeScript и Babel идентичны. Хотя TypeScript требует дополнительного времени для проверки типов, это не оказывает существенного влияния на производительность. Кроме того, существуют сторонние плагины, такие как fork-ts-checker-webpack-plugin, для ускорения процесса проверки типов.

Что выбрать?

Как уже говорилось, и компилятор TypeScript, и Babel по-своему обрабатывают код. Таким образом, у разработчиков есть много мнений, и выбор одного из них может быть сложной задачей.

С последним обновлением Babel он значительно улучшился, и единственным недостатком, который я вижу, является невозможность проверки типов. Для этого вам нужно использовать пользовательский процесс. Во всем остальном компилятор Babel и TypeScript кажутся похожими, поэтому многие разработчики предлагают использовать их вместе.

Создавайте приложения на основе веб-компонентов, не создавайте веб-монолиты.

Заключение

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

Последняя редакция 16 января, 2023 в 11:01