Expo + React Native + TypeScript環境を作る手順まとめ

概要

React Nativeによるアプリ開発では、Expoを使うと中々捗るのですが、*1
2018年11月3日にExpo SDKがv31.0.0にバージョンアップしました。 blog.expo.io

このリリースの大きなポイントとしては、2018年9月にリリースされたReact Native 0.57に対応したことです。 React Nativeはバージョン0.57でTypeScriptをサポートしました。そのため、Expoを使ってもTypeScriptでの開発ができるようになります。

今回はExpo + React Native環境をTypeScript化するための手順をまとめます。

概要
手順
動作確認
- TypeScriptの恩恵を受ける
- シミュレーターの起動
まとめ

手順

プロジェクトを作る

$ expo init typescript-project
$ cd typescript-project

TypeScriptのインストールと設定

TypeScriptを使用するのでbabelは削除します。

$ rm babel.config.js
$ yarn remove babel-preset-expo

インストール

続いて、TypeScript関連のモジュールをインストールします。

yarn add typescript tslint @types/expo @types/react @types/react-native
yarn add -D tslint

tsconfig.json の設定

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2015", "esnext.asynciterable"],
    "jsx": "react-native",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "types": []
  }
  "include": [                                                                                                            
    "./App.tsx"                                                                                                            
  ],                                                                                                                       
  "exclude": [                                                                                                             
    "node_modules"                                                                                                         
  ]
}

tslint.json の設定

{
  "extends": [
    "tslint:recommended"
  ],
  "rules": {
    "no-any": true,
    "prefer-array-literal": [true, { "allow-type-parameters": true }],
    "variable-name": [true, "ban-keywords", "check-format", "allow-pascal-case", "allow-leading-underscore"]
  }
}

以上でインストールと設定は終わりです

App.jsをTypeScript化

単純に拡張子を.tsxにするだけでTypeScript化ができます。簡単ですね。
jsxを含まない場合は、.tsとします。

$ mv App.js App.tsx

動作確認

TypeScriptの恩恵を受ける

App.jsをApp.tsxにTypeScript化したので、わざとコンパイルエラーとなるような修正を入れて、tslintやtscで怒られてみましょう。
App.tsxを開き、下記のコードを追加します。

...省略
const a: number = 1;                                                                                                       
const b: string = a  
...省略

定数bへの代入している行ではセミコロンが抜けているため、tslintで怒られるはずです。文字列型の定数bに数値型の定数aを代入しようとしているため、コンパイルエラーになるはずです。

$ yarn tslint App.tsx

ERROR: App.tsx[5, 20]: Missing semicolon

予想通りの結果です！

$ yarn tsc -p ./ --noEmitOnError
App.tsx:5:7 - error TS2322: Type 'number' is not assignable to type 'string'.

5 const b: string = a
        ~

App.tsx:5:7 - error TS6133: 'b' is declared but its value is never read.

5 const b: string = a
        ~

Found 2 errors.

error Command failed with exit code 1.

こちらは、型が異なるも代入でfailしていることに加え、定数bを使用していないこともわかりました。 *2

シミュレーターの起動

最後にApp.tsxがこれまで通り動作するかを確認します。

$ yarn start

f:id:watasihasitujidesu:20181209150433p:plain

問題なく動作しましたね！

まとめ

今回はExpo + React Nativeの環境にTypeSCriptを導入する手順について書きました。これまで通り(?)TypeScriptのinstallと設定を書き、.jsを.tsxに変更するだけでTypeScriptの恩恵を受けることができました。

TypeScriptの導入とは話が別ですが、Expo SDKがReact Nativeを追従する速さには驚きですね。 9月のリリースに対して11月に対応するのは素晴らしいです。 React Natibe のブログやExpoのブログは要チェックですね。

*1:詳細は割愛

*2:--noEmitOnErrorオプションをつけることで、コンパイルエラーがあった場合に.jsファイルを生成しないようにしています。

production.log

株式会社リブセンスでエンジニアをやっている星直史のブログです。