React Native с TypeScript

Полное руководство по преобразованию проекта React Native в TypeScript

Обновление от 27 июня '18: Спасибо за широкий отклик на эту статью. React Native прошел долгий путь с тех пор, как год назад я написал оригинальную статью. Настроить TypeScript теперь намного проще. Сегодня я обновил эту статью новыми шагами. Наслаждаться!

TypeScript - это надмножество JavaScript, которое в первую очередь обеспечивает дополнительную статическую типизацию, классы и интерфейсы. С 2012 года TypeScript стал популярным выбором среди программистов, переходящих на JavaScript с более структурированных языков.

Одно из преимуществ TypeScript - лучший инструментарий. TypeScript позволяет IDE предоставлять более богатую среду для выявления распространенных ошибок при вводе кода (в отличие от запуска инструмента после того, как вы закончили код). Также вы можете использовать Visual Studio Code - высокопроизводительный редактор, который отлично интегрируется с TypeScript. Для большого проекта JavaScript внедрение TypeScript может привести к созданию более надежного программного обеспечения, при этом его можно будет развернуть там, где будет работать обычное приложение JavaScript. Обратная совместимость с версиями JavaScript - еще одно преимущество использования TypeScript. Короче говоря, TypeScript предоставляет отличные инструменты и языковые службы для автозаполнения, навигации по коду и рефакторинга, а также обеспечивает отличную обратную совместимость.

Довольно преимуществ! Преимущества инструментов, используемых в этом проекте, по сравнению с альтернативами (TypeScript против Flow, Visual Studio против Atom, Babel против TypeScript) выходят за рамки этой статьи. Думаю, вы уже знаете о преимуществах TypeScript. Однако я оставлю несколько полезных ссылок в конце этой статьи.

Это руководство проведет вас через шаги, необходимые для настройки проекта React Native в TypeScript.

Настроить React Native

Мы начнем с тех же шагов, что и для обычного проекта React Native (на JavaScript). Я собираюсь описать здесь минимальные шаги, потому что Руководство по началу работы React Native хорошо документировано.

Установите XCode (для iOS) и Android Studio (для Android).

Создать проект

Простой и эффективный способ начать проект, ориентированный на реакцию, - это использовать интерфейс командной строки. Приведенная ниже команда сгенерирует проект со всеми настройками, необходимыми для разработки, включая настройку babel, iOS и Android. Этот проект написан на JavaScript; мы скоро конвертируем его в TypeScript. Выберите название для проекта; Todo - это имя, которое я предпочитаю для этого урока.

react-native init Todo

Настройка кода Visual Studio

Visual Studio Code - один из лучших редакторов на сегодняшний день, особенно для проектов TypeScript. Поскольку наша цель - преобразовать проект RN в TypeScript, давайте сначала установим VSCode. Вы можете пропустить этот раздел, если вы уже знакомы с настройкой VSCode.

Скачайте Visual Studio Code и установите. Откройте код Visual Studio, нажмите Cmd+Shift+P и введите Code. Выберите команду Shell Command: Install 'code' command in PATH.

Вы должны настроить расширение TSLint, чтобы иметь возможность выполнять статические проверки из редактора. Установите его из вкладки расширений.

Настроить и протестировать

Прежде чем мы начнем преобразовывать проект в TypeScript, нам нужно убедиться, что наша установка работает. Я собираюсь настроить iOS и протестировать. В качестве альтернативы вы можете попробовать Android, особенно если вы пробуете это руководство в Windows.

Откроем проект в VSCode. Перейдите в папку проекта Todo и введите code .;

Обновить package.json

На данный момент это все, но мы вернемся и добавим больше позже. Бежим, посмотрим, все ли в порядке.

npm run ios

Чтобы включить Live Reload или Hot Reload, нажмите Cmd+D в окне симулятора; вы увидите меню разработчика. Выберите Live Reload или Hot Relaod.

И, наконец, давайте добавим нашу работу до этого момента в репозиторий git. VS Code имеет отличную интеграцию с git; так что откройте Git Tab и нажмите Initialize Git Repository. Оставьте комментарий и сделайте коммит.

Настроить TypeScript

Теперь давайте настроим TypeScript для этого проекта. Мы начнем с установки библиотеки TypeScript, линтера и некоторых других необходимых библиотек.

npm install typescript tslint tslint-react tslint-eslint-rules react-native-typescript-transformer tslint-react-recommended --save-dev

Создать `tsconfig.json`

Создайте tsconfig.json в корне проекта со следующей конфигурацией:

Добавьте типизацию

Мы должны установить типизацию для библиотек React и React Native (типизация - это файлы определения - подробнее об этом читайте здесь) для наилучшего взаимодействия с линтером.

npm install @types/react @types/react-native --save-dev

Настроить React Native CLI

Создайте rn-cli.config.js в корне проекта со следующим содержимым. Это очень важный шаг. Будьте осторожны с именем файла.

Настроить TSLint

Вся цель преобразования этого проекта в TypeScript - получить правильные ошибки линтера при вводе текста, и TSLint здесь, чтобы помочь. Чтобы добавить поддержку TSLint, создайте файл tslint.json в корне проекта со следующим содержимым:

Не стесняйтесь изменять эти конфигурации в соответствии со стандартами кодирования вашего проекта. Посетите эту ссылку для получения более подробной информации. Теперь добавим в package.json скрипт линтера.

Возможно, вам придется перезапустить Visual Studio Code на этом этапе, чтобы TSLint начал показывать ошибки. Или вы можете перезагрузить окно, выполнив следующие действия: CMD + P , введите > Reload и выберите Reload Window

Преобразование кода в TypeScript

Создайте папку src и добавьте app.tsx. Вы также можете удалить App.js из корня

Создайте src / app.tsx

Обновите index.js

Запустить

Вы видите то же окно, что и раньше. Зафиксируйте новые файлы в git и обновите существующие.

Настроить тестовый костюм

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

Установите необходимые модули:

npm i jest @types/jest ts-jest react-test-renderer @types/react-test-renderer --save-dev

Создать src/app.test.tsx:

Обновите package.json со следующей jest конфигурацией:

Запустите npm test. Вы должны увидеть отчет о покрытии в консоли. Более подробный отчет в формате HTML доступен на coverage/lcov-report/index.html