あるSEのつぶやき・改

IT・システム開発に関することをつぶやいています。

React Native+ExpoでTypeScriptを使用する


React Native + Expo で TypeScript を使用するのは、以前は面倒だったようですが、今の Expo のバージョンだと簡単ですね。

Expo をインストールします。

$ npm install expo-cli --global
$ expo --version
3.0.2

Expo のプロジェクトを作成します。

$ expo init expo-typescript

プロジェクトを選択しますが、TypeScript のプロジェクトを選択できるようになっています。

? Choose a template: 
  ----- Managed workflow -----
  blank               minimal dependencies to run and an empty root component 
❯ blank (TypeScript)  same as blank but with TypeScript configuration 
  tabs                several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  bare-minimum        minimal setup for using unimodules 

最後にプロジェクトの情報を入力します。

? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ › 50% completed
 {
   "expo": {
     "name": "<The name of your app visible on the home screen>",
     "slug": "expo-typescript"
   }
 }

こんな感じですね。

 {
  "expo": {
    "name": "expo-typescript",
    "slug": "expo-typescript"
  }
}

プロジェクトの中身を確認すると、App.jsApp.tsxにすでに書き換わっていることが分かります。

$ cd expo-typescript
$ ls
App.tsx         babel.config.js     package.json
app.json        node_modules        tsconfig.json
assets          package-lock.json

プロジェクトを起動します。

$ npm start

iOSのシミュレーターで問題なく起動できました。

f:id:fnyablog:20190720004530p:plain:w320

Expo のドキュメントは、現時点ではちょっと古いようなのでご注意ください。

docs.expo.io