TypeScript потрясающий. Я это! Он обеспечивает эффективную проверку типов в вашей кодовой базе, которая помогает вам быстрее находить ошибки, а также легче формировать контракты и соблюдать их. Не говоря уже об удивительном опыте редактора, который приходит с его внедрением, его поддержка в VS Code простая и быстрая!

Непопулярный союз в прошлом

TypeScript всегда пользовался растущей пользовательской базой, но все еще есть много разработчиков JavaScript, которые его не приняли. Это связано с рядом болевых точек, из-за которых разработчики часто испытывают затруднения. Обычно все сводилось к необходимости управлять и изучать 2 различных цепочки инструментов, чаще всего TypeScript и Babel. Многие разработчики JavaScript используют Babel и не хотят также хлопот по внедрению TypeScript. Проблемы, с которыми сталкиваются эти разработчики, включают:

  • Зависимость от определенных плагинов Babel.
  • Многие инструменты поддерживают Babel из коробки, но не TypeScript. Примером может служить Jest фреймворк для тестирования JavaScript. Он компилирует ваш тестовый код с помощью Babel по умолчанию, поэтому вам не нужно ничего настраивать. Однако, если вы хотите протестировать код TypeScript с его помощью, вам необходимо установить пакет ts-jest и настроить Jest для компиляции кода с его использованием.
  • Требуется двухэтапный процесс сборки; скомпилировать код TypeScript с помощью одного инструмента, а затем скомпилировать выведенный код JavaScript с помощью Babel. Это увеличивает время и сложность сборки.

Первоклассная поддержка TypeScript в Babel

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

В блоке @babel/preset-typescript появился новый плагин. 🎉

Этот плагин просто удаляет типы TypeScript из вашего кода, чтобы Babel мог понимать его как простой JavaScript. Однако нам нужно использовать его в тандеме с парой других плагинов Babel, чтобы полностью поддерживать все функции типа TypeScript; @babel/plugin-proposal-class-properties и @babel/plugin-proposal-object-rest-spread. Итак, наша минимальная конфигурация Babel будет выглядеть так:

// babel.config.js
module.exports = {
  presets: ["@babel/typescript"],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
  ],
};

Устранены болевые точки?

Ну да.

Теперь нам не нужна дополнительная настройка для таких инструментов, как Jest, поскольку он поддерживает Babel из коробки без дополнительной настройки. Он найдет ваш файл конфигурации Babel и запустит предустановку TypeScript.

Вам также не нужно вводить более одного шага сборки. Ваша компиляция может происходить за один шаг путем компиляции с помощью Babel.

Проверка типа

Я немного обманул выше. Да, наша сборка теперь может выполняться за один шаг путем компиляции с помощью Babel, однако предустановка @babel/preset-typescript не выполняет никакой проверки типов. Он просто удаляет типы из вашего кода, чтобы Babel мог понять его как простой JavaScript. Так что на самом деле нам вроде как нужен еще один шаг сборки, нам нужно использовать инструмент TypeScript отдельно для проверки типа нашего кода.

Для этого нам нужно установить TypeScript:

yarn add --dev typescript

Затем добавьте конфигурацию TypeScript в файл tsconfig.json:

// tsconfig.json
{
  "compilerOptions": {
    "esModuleInterop": true,
    "lib": ["esnext"],
    "strict": true
  }
}

Эта конфигурация делает следующее:

  • "esModuleInterop": true - позволяет использовать импорт именно так, как ожидал Babel. TypeScript не имеет понятия импорта по умолчанию, вы группируете вместе все экспортируемые модули в одну переменную с помощью этого синтаксиса; import * as React from 'react'. Однако Babel этого не требует, и вы можете использовать этот синтаксис; import React from 'react'.
  • "lib": ["esnext"]. Это позволяет использовать новейшие функции языка JavaScript.
  • "strict": true - включает все параметры строгой проверки типов.

И, наконец, запустите инструмент TypeScript с флагом --noEmit, чтобы он не выводил никаких файлов. При желании вы можете не использовать --noEmit, а вместо этого использовать --declaration --emitDeclarationOnly. Это выведет файлы декларации TypeScript, если вы хотите связать их с кодом JavaScript сборки.

tsc --noEmit
# or
tsc --declaration --emitDeclarationOnly

Их также можно настроить с помощью файла конфигурации TypeScript.

В заключение

Итак, теперь мы знаем, как настроить Babel для компиляции кода TypeScript и как печатать, проверять наш код. Будущее типов в мире JavaScript выглядит ярче, чем когда-либо. Спасибо Babel и TypeScript вам!