Expo（TypeScript）セットアップ

August 25, 2020

Expo

React Native

TypeScript

はじめに

Expo を TypeScript で使うことは何度かやっているんですが、手順として整理できていなかったので、整理してみました。Expo プロジェクトを作成し、ESLint を導入します。

セットアップ手順

事前準備

nodenv を使って最新の Node.js を使って、expo-cli と yarn をインストールします。yarn は必須ではないんですが、今回は利用する手順にしています。

nodenv shell 14.8.0
npm install --global expo-cli
npm install --global yarn
nodenv rehash

expo のバージョンを確認し、正しくインストールされたことを確認します。

$ expo --version
3.24.2

Expo プロジェクト作成

expo init コマンドで Expo プロジェクトを生成するんですが、それと同時に Git リポジトリ化されてしまいます。その動作で問題ないことも多いのでしょうが、ある種の制約にはなってしまうので、今回の手順ではリポジトリ化を解除してしまいます。

expo init my-project --template expo-template-blank-typescript
# Git リポジトリ解除
rm -rf my-project/.git/
cd my-project
# ローカルの Node.js バージョンを固定
nodenv local 14.8.0
yarn start

ESLint 導入

直接的には関係ないですが、開発着手前に欲しい ESLint もここで導入します。

yarn add --dev eslint
yarn run eslint --init

ここから eslint --init コマンドによる質問が開始します。

How would you like to use ESLint?

To check syntax, find problems, and enforce code style を選択します。

What type of modules does your project use?

JavaScript modules (import/export) を選択します。

Which framework does your project use?

React を選択します。

Does your project use TypeScript?

Yes を選択します。

Where does your code run?

Node のみ選択します。

How would you like to define a style for your project?

Use a popular style guide を選択します。

Which style guide do you want to follow?

個人的な好みで Airbnb: https://github.com/airbnb/javascript を選択します。

What format do you want your config file to be in?

個人的な好みで YAML を選択します。

ここで、下記メッセージが出て、必要なパッケージが分かります。

Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.20.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2 eslint-plugin-jsx-a11y@^6.3.0 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0 @typescript-eslint/parser@latest

Would you like to install them now with npm?

No を選択します。Yarn 使っているので、後で手動で対応することにします。

以上で、質問は終わりなので、先程表示された必要なパッケージを追加します。

yarn add --dev eslint-plugin-react@^7.20.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.2.0 eslint-plugin-import@^2.21.2 eslint-plugin-jsx-a11y@^6.3.0 eslint-plugin-react-hooks@^4 @typescript-eslint/parser@latest

これで ESLint が機能するようになりましたが、生成された設定ファイルには不足分があったので、下記差分を入れました。

@@ -13,4 +13,24 @@ parserOptions:
 plugins:
   - react
   - '@typescript-eslint'
-rules: {}
+settings:
+  import/resolver:
+    node:
+      extensions:
+        - .js
+        - .jsx
+        - .ts
+        - .tsx
+rules:
+  import/extensions:
+    - 2
+    - extensions:
+        - .js
+        - .jsx
+        - .ts
+        - .tsx
+  react/jsx-filename-extension:
+    - 2
+    - extensions:
+      - .jsx
+      - .tsx

以上で ESLint 対応も完了です。