В этом руководстве вы узнаете, как настроить проект React Native с помощью TypeScript.
Примечание. В этом руководстве предполагается, что вы знакомы с TypeScript и React. В противном случае вы можете сначала прочитать о них.
ПРИМЕЧАНИЕ. Эта статья была впервые размещена в моем блоге. Каждую статью я публикую через две недели на Medium. Возможно, вы захотите подписаться на мою рассылку новостей, потому что вы получите такой контент раньше! 💌
TypeScript становится все популярнее. К счастью, начиная с версии 0.57 React Native поставляется с поддержкой TypeScript и требует минимальной настройки.
Этот пост представляет собой исчерпывающее руководство по настройке проекта React Native с помощью TypeScript. Это обновление и усовершенствование инструкций моей более старой статьи. Помимо Jest, мы также подробно рассмотрим, как настроить линтинг, Enzyme и React Native Testing Library. Давайте начнем.
1. Создание проекта
Используя React Native CLI и шаблон Emin, мы можем сгенерировать проект с предустановленным TypeScript.
react-native init myapp --template typescript && node myapp/setup.js && cd myapp
Это так просто 👏🏻.
2. Настройка TSLint
Далее мы хотим настроить линтинг. Мне нравится сочетание трех правил:
Вы можете проверить, что делает соответствующая конфигурация, щелкнув по ней. Давайте сейчас установим эти правила вместе с TSLint.
npm install --save-dev tslint tslint-eslint-rules tslint-react tslint-config-prettier
Следовательно, мы хотим создать tslint.json
файл. В нем вы можете точно настроить конфигурацию линтинга (ниже вы увидите мои личные предпочтения).
Вы также можете изменить ключ lib
в вашем tsconfig.json
с ["es6"]
на ["es2017"]
, чтобы иметь доступ к более новому синтаксису, например Object.value
.
Если ваш редактор поддерживает интеграцию TSLint, он уже должен жаловаться на пустой интерфейс Props
в App.tsx
¹. Если ваш редактор этого не делает, добавьте следующее значение к вашему scripts
ключу в вашем package.json
:
"lint": "tslint --project tsconfig.json"
Теперь вы можете использовать свой терминал.
npm run lint
Если вы все настроите правильно, это будет кричать вам о пустом интерфейсе в App.js
.
3. Настройка Jest
Jest уже установлен по умолчанию 🎁. Однако нам необходимо установить ts-jest.
npm install --save-dev ts-jest
И нам нужно настроить его для TypeScript.
Создайте файл с именем tsconfig.jest.json
. Он скажет нашему ts-jest
препроцессору правильно перевести наш код в обычный JavaScript.
После этого добавьте следующее к jest
ключу в вашем package.json
, чтобы Jest искал файлы TypeScript и знал, как их преобразовать.
Создайте файл с именем App.test.tsx
. В нем мы создадим базовый тест, чтобы увидеть, работает ли Jest.
Запустите npm test
, чтобы проверить, работает ли он.
PASS ./App.test.tsx add ✓ should add two numbers (4ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 2.503s Ran all test suites.
Тада 🎉. Оно работает.
Примечание к следующему разделу: большинство людей используют либо Enzyme, либо React Native Testing Library. Таким образом, вы, вероятно, захотите следовать только одному из пунктов 4. a) и 4. b).
4. а) Настройка фермента
Enzyme требует 5 упаковок, две из которых типовые. Давайте их установим 👏🏻.
npm install --save-dev enzyme enzyme-adapter-react-16 react-dom @types/enzyme @types/enzyme-adapter-react-16
Кроме того, нам нужно настроить Enzyme. Создайте в корневом каталоге проекта папку с именем tests / и создайте в ней файл с именем setup.js.
Этот файл сообщает Enzyme использовать адаптер для React 16.
Jest нужно знать об этом установочном файле. Измените ключ jest
в вашем package.json
, включив в него следующее:
Мы можем протестировать нашу установку, написав простой тест с Enzyme в App.test.tsx
.
Запустите тест: npm test
.
PASS ./App.test.tsx App rendering ✓ should render a <View /> (8ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 4.034s Ran all test suites.
Успех, Энзим бежит 🕺🏻.
4. б) Настройка библиотеки тестирования React Native.
Нам нужен только один пакет для библиотеки тестирования React Native.
npm install --save-dev react-native-testing-library
И снова простой тест, чтобы убедиться, что это работает.
Запустите npm test
.
PASS ./App.test.tsx App ✓ should render a welcome (1831ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 5.982s Ran all test suites.
Молодцы 🐐! Ваш проект React Native настроен с помощью TypeScript.
Следующие шаги
Если вы новичок в React Native, ознакомьтесь с руководством для начинающих. В противном случае удачного кодирования! ⚛️
Если вам понравилась эта статья, не стесняйтесь хлопать в ладоши и передайте мне привет в Твиттере. Спасибо 🤗
ПРИМЕЧАНИЕ. Эта статья была впервые размещена в моем блоге. Каждую статью я публикую через две недели на Medium. Возможно, вы захотите подписаться на мою рассылку новостей, потому что вы получите такой контент раньше! 💌
Сноски
- Если ваш редактор поддерживает интеграцию TSLint, но на этом этапе не кричит на вас, вам может потребоваться перезапустить редактор, чтобы изменения вступили в силу.