TypeScript
reactnative
react-native
expo

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

More than 1 year has passed since last update.

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。