Почему Машинопись?

Во-первых, я не рекомендую всем переходить на 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.

Не стесняйтесь хлопать в ладоши, если вы считаете, что это стоит прочитать!

~ Удачного кодирования с мистером Лео ~