CRNAで作成したReactNative開発環境にTypeScriptを導入する

前回、CRNAでReactNativeの開発環境を構築したので、その続きでTypeScriptを導入していきます。

TypeScriptをインストール

$ yarn add --dev typescript

yarn add v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "jest-expo > babel-jest@21.2.0" has unmet peer dependency "babel-core@^6.0.0 || ^7.0.0-alpha || ^7.0.0-beta || ^7.0.0".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
└─ typescript@2.6.2
✨  Done in 10.84s.

expoのTypeScript型定義ファイルが足りないため、@typesパッケージをインストール

$ yarn add --dev @types/expo

yarn add v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "jest-expo > babel-jest@21.2.0" has unmet peer dependency "babel-core@^6.0.0 || ^7.0.0-alpha || ^7.0.0-beta || ^7.0.0".
warning "react-native-scripts > xdl > glob-promise@3.3.0" has unmet peer dependency "glob@*".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
├─ @types/expo@24.0.3
├─ @types/fbemitter@2.0.32
├─ @types/react-native@0.52.1
└─ @types/react@16.0.34
✨  Done in 19.22s.

ちなみに@typesパッケージは以下で探せます

TypeScript Types Search

設定ファイルを書く

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017", // tsではなくbabelのasync/awaitを使うため、targetを高く設定する
    "module": "ES2015",
    "jsx": "react-native", // 成果物を読みやすくするため、jsxで生成する
    "outDir": "./dist",
    "noImplicitAny": true, // 暗黙のany型の宣言や式を警告する
  },
  "exclude": ["node_modules", "dist"]
}

ビルド

$ tsc -w -p .

以上でTypescriptの導入完了です