Если вы создаете веб-приложение сегодня, вы, вероятно, используете популярный инструмент Babel, чтобы воспользоваться преимуществами последних функций EcmaScript (async / await, классы, деструктуризация, распространение объектов и т. Д.) По мере роста вашего приложения вы можете захотеть лучший инструментарий, помогающий с рефакторингом, автозаполнением и, возможно, безопасностью типов. Так было у нас в Pleo, поэтому мы рассматривали возможность перехода с Babel на TypeScript.
Прогрессивная миграция
Одно из основных требований, которое у нас было перед тем, как совершить скачок, заключалось в том, чтобы мы могли медленно переходить к файлам TypeScript, но сохранять существующий код JavaScript без необходимости изменять все сразу. Поскольку TypeScript теперь поддерживает транспиляцию JavaScript, мы можем сделать это легко!
Делаем переключатель
Чтобы начать сегодня работу с TypeScript, мы настроим наш проект и обновим конфигурацию нашего веб-пакета.
Начнем с установки машинописного текста.
npm install --save-dev typescript
Чтобы настроить компилятор TypeScript, нам нужно создать tsconfig.json. Вот минимальные необходимые настройки:
Важная часть - allowJs: true, потому что мы будем использовать TypeScript для преобразования наших файлов JS, как это делает Babel. Мы установим checkJs: false, потому что пока не хотим, чтобы TypeScript начинал проверку типов в наших файлах JS.
Мы заменим babel-loader загрузчиком TypeScript (мы выбрали awesome-typescript-loader) в конфигурации нашего веб-пакета. Мы также добавим загрузчик исходных карт для хранения исходных карт. Мы добавим расширения .ts и .tsx as, но оставим .js и .jsx , поскольку не хотим переносить все наши файлы сразу.
Затем мы устанавливаем awesome-typescript-loader и sourcemap-loader.
npm install --save-dev awesome-typescript-loader sourcemap-loader
И обновите наш webpack.config.js файл следующим образом:
Теперь мы можем избавиться от множества зависимостей babel!
Вот и все! Вы сделали это, babel заменен на TypeScript!
Преобразование файлов в TypeScript
Теперь, когда наш стек разработки готов, давайте воспользуемся замечательными функциями TypeScript. Давайте начнем с простого компонента React и изменим его расширение с .jsx на .tsx.
Если мы скомпилируем сейчас, мы, скорее всего, получим некоторые ошибки. Это потому, что нам не хватает некоторых определений типов для React (или любого другого внешнего модуля). Давайте исправим это, установив определения типа реакции. Определения для сторонних библиотек можно найти на TypeSearch.
npm install --save-dev @types/react
Последнее, что нам нужно, - это более подробно рассказать о наших реквизитах. Возможно, вы привыкли к «prop-types», мы сделаем нечто подобное. Вот пример:
Обратите внимание на тип SFC<AvatarProps>. SFC - это тип функционального компонента React без сохранения состояния, и мы передаем интерфейс AvatarProps, который будет выполнять проверку PropTypes во время компиляции, а не во время выполнения. Это означает лучшее автозаполнение для свойств и отсутствие ошибок или предупреждений во время выполнения!
Благодаря миграции JS-TS файл за файлом мы теперь можем воспользоваться всеми удивительными функциями, которые он может предложить, такими как улучшенное завершение кода, строгая проверка типов, переход к определению и многое другое! Это помогло нам, в Pleo, предотвратить кучу ошибок времени выполнения, упростить рефакторинг и улучшить самодокументируемый код.
