ReactNative+TypeScriptをするための環境構築のメモです。

バージョンと前提条件

macOS Mojave 10.14
Xcode 10.0(XcodeのiOSシミュレーターを使います)
node 9.4.0
npm 6.4.1
Homebrew 1.7.6
tsc 3.1.3
yarn 1.10.1
react-native-cli: 2.0.1
react-native: 0.57.1

ReactNativeプロジェクトを作成する

$ cd [プロジェクトを作成するパス]
$ react-native init [プロジェクト名]

以下のような構成のプロジェクトが作成されるかと思います。

プロジェクト名
├ android/
├ ios/
├ node_modules/
├ .babelrc
├ .flowconfig
├ .gitattributes
├ .gitignore
├ .watchmanconfig
├ App.js
├ app.json
├ index.js
├ package.json
└ yarn.lock

App.jsはReavtNativeアプリを作ったとき最初に読み込みされるファイルで、基本的にはコレにいろいろ追加していきます。
この状態で$ react-native run-ios を実行するとiOSシミュレータが起動して「Welcome to React Native!」というメッセージが表示されますが、今回はTypeScriptを使いたいので、続けて環境を作ります。

ReactNativeプロジェクトにTypeScriptの環境を入れる

$ cd [プロジェクトのパス] でプロジェクトの階層に移動して、以下のコマンドを実行します。

$ yarn add --dev typescript react-native-typescript-transformer
$ yarn add --dev @types/react @types/react-native

「react-native-typescript-transformer」はReact NativeからTypeScriptを呼ぶために必要になるものです。
@typesはTypeScriptの型を定義するnpmパッケージだそうです。
とりあえずこの２つを入れておけばReact NativeからTypeScriptが使えるようになります。

TypeScriptの設定をする

1. tsconfig.jsonの作成

TypeScriptファイルをコンパイルするために必要なtsconfig.jsonファイルを作成します。
$ yarn tsc --init --pretty --jsx react
上記のコマンドを実行すると、プロジェクト直下にtsconfig.jsonが作られます。

デフォルトだとこんな感じ（コメントアウトされているのは省略しています）

{
  "compilerOptions": {
  "target": "es5",
  "module": "commonjs",
  "jsx": "react",
  "strict": true,
  "esModuleInterop": true
  }
}

これを下記のように変更します。

{
  "compilerOptions": {
  "target": "ESNEXT", // ESNEXTにしておけば最新のES環境が使えるので変更しておく
  "module": "commonjs",
  "jsx": "react",
  "strict": true,
  "allowSyntheticDefaultImports": true, // 追加
  "esModuleInterop": true,
  }
　// ↓追加
  ,
  "exclude": [
    "node_modules"
  ]
}

その他の設定はお好みで。

2. rn-cli.config.jsの作成

プロジェクト直下にrn-cli.config.jsファイルを作成し、以下の内容を記入します。
rn-cli.config.jsファイルにはReactNativeを動かすときにreact-native-typescript-transformerを使うようにする設定を書きます。


module.exports = {
  getTransformModulePath() {
  return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};

TypeScriptが動くか確認する

$ react-native initしたときに作られたApp.jsをApp.tsxという拡張子に変更します。これでAppファイルがTypeScriptとして認識されます。

XcodeのiOSシミュレータでアプリが起動するか確認します。
iOSシミュレータが起動中の場合は一旦終了してから以下のコマンドを実行します。
$ react-native run-ios
再び「Welcome to React Native!」が表示されたら成功です。
ここで何らかのエラーが出る場合はReactNativeかyarnのバージョン不整合の場合が多いようです。色々エラーが出て対処法を探していたのですが、自分の環境ではreact-nativeをアップデートして、プロジェクトを作り直したら動きました。

この記事を書き始めたときはreact-nativeのバージョンが0.55.7とかで、赤いエラー画面が出まくりで全然実行できなかったのですが、２、３日放置してたらreact-nativeが0.57.1にしてから実行できるようになりました。React Nativeは更新が早いのでもしバージョンの不整合とかあったら数日放置するか、ダウングレードするのがいいかもしれません。

成功した記念のスクショ。
ちなみに今回はiPhone Xのシミュレータで動かしましたが、機種を変えたい場合は[プロジェクトのパス]/node_modules/react-native/local-cli/runIOS/runIOS.js　の下記のdefaultを変更すればOKです。

...
  options: [
    {
      command: '--simulator [string]',
      description: 'Explicitly set simulator to use',
      default: 'iPhone XS', // ここがシミュレータの機種設定
    },
...

あとはこのApp.tsxをいじったりファイルを付け足したりするわけですが、長くなったので一旦分けます。

続き
ReactもTSも全然わからん状態からReact NativeをTypeScriptでやる[HelloWorld編]

参考サイト