Использование TypeScript с React Native

В этом руководстве вы узнаете, как настроить проект 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, ознакомьтесь с руководством для начинающих. В противном случае удачного кодирования! ⚛️

Если вам понравилась эта статья, не стесняйтесь хлопать в ладоши и передайте мне привет в Твиттере. Спасибо 🤗

Сноски

Если ваш редактор поддерживает интеграцию TSLint, но на этом этапе не кричит на вас, вам может потребоваться перезапустить редактор, чтобы изменения вступили в силу.