Typescript (TS) — это круто!😻 Он делает код более понятным, простым в обслуживании и предотвращает распространенные ошибки. После тщательного рассмотрения вы решили, что это лучший выбор для вашей команды, и теперь вы хотите принять его. Ура! 🎉
К сожалению, внедрение TypeScript не так просто, как может показаться… поскольку этот процесс может быть утомительным и занимать много времени. Итак, как перейти с JS на TS?
С чатом GPT! Еще нет 😁. Используя ts-migrate, мы можем упростить этот процесс 💫.
О ts-мигрировать
ts-migrate — это инструмент, предназначенный для облегчения миграции кода на TypeScript. Он может принимать проект на основе JavaScript (JS) или частично на основе TypeScript и создавать на выходе полностью скомпилированный проект TypeScript.
Недавно наша команда использовала ts-migrate для преобразования 1000 файлов в нашем проекте из JS в TS, и это помогло сэкономить время и сделать весь процесс намного удобнее.
Установка и настройка ТС
Перед началом процесса миграции мы должны установить и настроить TS:
- Установить пакет ТС:
npm install typescript --save-dev
- Инициализация конфигурации ТС:
npx tsc --init
- Установите типы React (если вы используете React):
npm install --save-dev @types/react
Примечание. Команда init создаст файл tsconfig.json. Вы можете изменить его позже в соответствии с вашими требованиями.
Преобразование файлов JS в TS
Мы будем использовать ts-migrate для переноса наших файлов JS в TS:
- Установите ts-мигрировать:
npm install --save-dev ts-migrate
- Переименуйте файлы JS в соглашение TS:
yarn ts-migrate rename <project-dir> --sources <specific-dir>
- Преобразование файла JS в формат TS:
yarn ts-migrate migrate <project-dir> --sources <specific-dir>/file.tsx
Примечание. Лучше сначала зафиксировать изменения переименования файлов, а затем зафиксировать преобразование в изменения TS. Таким образом, GIT распознает изменение как изменение одного файла, а не как два отдельных изменения, то есть удаление старого файла и создание нового.
Примечание. Я использую NPM для установки и YARN для выполнения команд ts-migrate. Я обнаружил, что ts-migrate лучше работает с YARN, но вы можете использовать все, что предпочитаете.
Пример 🤓
Я создал этот проект ts-migrate-example, чтобы продемонстрировать процесс миграции. Сначала клонируйте его на свой компьютер:
git clone https://github.com/shai20099/ts-migrate-example.git
Теперь мы перенесем наш первый JS-файл в TS 🚀.
Во-первых, мы собираемся переименовать файл:
yarn ts-migrate rename ./ --sources ./src/examples
После переименования файлов вот такой результат:
Наш следующий шаг — применить сценарий миграции к файлу примера:
yarn ts-migrate migrate ./ --sources ./src/examples/example.ts
Теперь мы можем увидеть некоторые возможности ts-migrate 🪄
Примечание. Если ts-migrate не может автоматически устранить проблемы с TS, он оставляет комментарий @ts-expect-error с подробными сведениями об ошибке.
Примечание. Несмотря на то, что ts-migrate помещает типы в переменные там, где это необходимо, нам все равно нужно помнить о замене любых типов на определенные.
Примечание. ts-migrate использует подключаемые модули для автоматического внесения изменений. Вы можете заставить его выполнять больше действий автоматически, создав собственные плагины для своего проекта. Подробнее здесь.
Краткое содержание
Ts-migrate — это инструмент, помогающий перенести код с JavaScript (JS) на TypeScript (TS). Его основная цель — создание скомпилированного кода с автоматическим исправлением некоторых ошибок с помощью плагинов. Хотя это и не полностью автоматизировано, мы обнаружили, что ts-migrate — невероятно ценный инструмент. Он умеет выявлять пробелы между JS и TS, исправлять то, что может, и помечать код, который необходимо исправить вручную. Такой подход значительно экономит время при переносе, особенно при работе с большим количеством файлов.
Удачи! 😃
