Expoで開発しているReactNativeアプリにTypeScriptを導入する

Cookpad社がReactNative開発でTypeScriptを使っているとのことだったので、自分もTSでReactNativeを書いていこうという意識が高まりました。
そこで、Expoで開発しているReactNativeアプリにTypeScriptを入れてみた時の手順です。

参考
React Native アプリの開発基盤構築 - クックパッド開発者ブログ

ExpoでTypeScriptを使うには以下の4ステップでOK

1. Typescriptをinstallしてtsconfig.jsonを作成する
2. tsconfig.jsonを書き換えてreact-native用の記述を追加
3. react-native-typescript-transformerをインストール
4. app.json（Expoのconfig）をいじってTSを動かせるようにする

動作確認をした時のExpoのバージョンは26.0.0です。

1. Typescriptをinstallしてtsconfig.jsonを作成する

$ npm install typescript
$ npm install -g typescript
$ tsc --init

2. tsconfig.jsonを書き換えてreact-native用の記述を追加

この設定がよく使われてそう。jsx: "react-native"が重要。
一部JSを残している場合はallowJs: trueを追記する。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "outDir": "build/dist",
    "sourceMap": true,
    "experimentalDecorators": true,
    "jsx": "react-native",
    "lib": ["dom", "es2015", "es2016"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "noEmitHelpers": true,
    "importHelpers": true,
    "strict": true,
    "noImplicitReturns": true
  }
}

3. react-native-typescript-transformerをインストール

$ npm install react-native-typescript-transformer

4. app.json（Expoのconfig）を編集してTSを動かせるようにする

app.json

{
  "expo": {
    "sdkVersion": "26.0.0",
    "packagerOpts": {
      "sourceExts": ["ts", "tsx"],
      "transformer": "node_modules/react-native-typescript-transformer/index.js"
    }
  }
}

---

後は既存のJSをTSに書き換えてnpm run startすればOK。