Почему Машинопись?
Во-первых, я не рекомендую всем переходить на TypeScript. Кто доволен Flow, ничего страшного. Некоторое время я использовал Flow для своих проектов, и он по-прежнему является мощным инструментом для проверки типов, чтобы предотвратить человеческую ошибку при разработке процесса.
Основная причина в том, что я хочу попробовать TypeScript в моем стороннем проекте, сейчас это тренд на проверку стиля. TypeScript имеет командную поддержку, в отличие от Flow и других инструментов или проектов, уже интегрированных с TypeScript в настоящее время: Angular, React, Vue, Babel 7 и т. Д.
Обработка проекта
Вы можете найти мой общедоступный проект здесь и запрос на вытягивание, который я сделал из ветки flow-to-typescript
, чтобы четко увидеть, что я изменил. Я создал из create-react-app
(CRA) версии 1.5 и вначале применил для него тип Flow. Теперь я попытаюсь записать, что я сделал при преобразовании моего проекта из Flow в TypeScript.
Установить TypeScript
Во-первых, нам нужно установить библиотеку машинописного текста и ее зависимости.
$ npm install --save-dev typescript @types/node @types/react @types/react-dom @types/react-router-dom @types/jest @types/moment @types/webpack-env
Конфигурационный файл
Во-вторых, мы создадим файл конфигурации с именем tsconfig.json
для TypeScript в нашей корневой папке проекта.
Я уже комментирую параметры в файлах конфигурации. Подробнее читайте в официальном документе.
Обновить имена файлов
Далее нам нужно преобразовать весь файл *.js
в *.tsx
для компонента React (включая тестовый файл для компонента React) или в *.ts
для служебных или вспомогательных файлов.
Удалите все // @flow
аннотации, в которых мы использовали это раньше.
Обновить конфигурацию Babel
Обратите внимание: мне нужно немного обновить module-resolver
конфигурацию, чтобы работать с модулями, относящимися к импорту. Раньше, когда я работал с Flow, мне нужно было только определить конфигурацию module-resolver
, такую как "root": ["./src"]
, и она отлично работала с импортом относительного пути. Однако с TypeScript я должен объявить каждый относительный путь, который я использую в проекте, и он должен быть таким же, как baseUrl
и paths
в файле конфигурации TypeScript выше.
Адаптировать TypeScript Checker
На этом этапе все, что мне нужно сделать, это адаптировать текст в моем коде для прохождения проверки TypeScript.
Мы можем добавить еще один сценарий, например typescript
в package.json
, чтобы мы могли запускать проверку TypeScript перед запуском модульного теста.
Примечания
Отмечу некоторый опыт работы с TypeScript в первый раз.
Предпочитать интерфейс типу
По словам моего друга, я использую интерфейс вместо шрифта. Вы можете больше узнать об интерфейсах и типах, например, о https://www.educba.com/typescript-type-vs-interface/.
До
После
Тип момента
До
После
Ненулевой оператор утверждения
Это новая концепция, когда я работаю с TypeScript. Он сообщает компилятору, что наш объект не нулевой. Давайте посмотрим на пример:
До
После
Обратите внимание, что мы обновляем lots.toFixed(3)
в Типе потока до lots!.toFixed(3)
.
Я новичок в TypeScript и, конечно же, мне есть куда совершенствоваться. Надеюсь, мой самый первый опыт работы с TypeScript может помочь кому-то, кто хочет попробовать TypeScript.
Не стесняйтесь хлопать в ладоши, если вы считаете, что это стоит прочитать!
~ Удачного кодирования с мистером Лео ~