【簡単】React NativeのプロジェクトにTypeScriptを導入するには？【アプリ開発に！】

2019/12/16

v0.57以降React Nativeが公式でTypeScriptに対応するようになりました。

Babel7でTypeScriptをトランスコンパイル出来るようになったため、その仕組みをReact Nativeが利用する形で実現されています。 ただし、Babelは古いJavaScriptへのトランスコンパイルを行うだけで、型チェックまでは行ってくれません。

そのため型チェックはtscコマンドで別途実行する必要があります。

そこで、この記事ではBabel7でReact Native+TypeScriptを実行しつつ、tscコマンドによる型チェックが出来る環境を構築するための手順を解説していきます。

• React Nativeでアプリ開発を行いたい方
• React NativeのプロジェクトにTypeScriptを導入する方法を知りたい方
• React Nativeの環境開発の方法を知りたい方

これらに当てはまる方におすすめの記事となっています。これを読めばTypeScriptをReact Nativeに導入する方法が丸わかりですよ。

サンプルプロジェクトを作成

まずは下記コマンドでReact Nativeのサンプルプロジェクトを作成します。

react-native init TSSampleApp 

シミュレーターを起動

サンプルプロジェクトが作成できたら、
下記コマンドを実行して画面が正常に表示されることを確認します。

npm run ios 

今回はTypeScriptの環境構築がメインですので、Androidは割愛します。

App.jsをApp.tsxにリネーム

次に下記コマンドでApp.tsxにファイル名をリネームします。

mv App.js App.tsx 

.tsxはJSXを返すファイルでTypeScriptを利用する場合の拡張子です。
リネーム後にシミュレーターを確認すると下記のエラーが表示されます。

これは利用しているReactやReact Nativeのライブラリの型定義ファイルが見つからず、
TypeScriptのコンパイルエラーになるためです。

ライブラリと型定義ファイルをインストール

次に下記コマンドでTypeScript本体とReact Native開発に必要な型定義ファイルをインストールします。
インストールするライブラリはReact Nativeの公式ドキュメントに従っています。

yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer 

@typesで始まっているTypeScriptの型定義ファイルはDefinitelyTypedで管理されています。

Metro Bundlerを再起動する

ライブラリのインストールが完了したら、上記のMetro Bundlerを再起動します。

起動が完了したら下記画面が表示されるようになります。
これでTypeScriptをBabelでトランスコンパイルして実行出来るようになりました。

React Native用のtsconfig.jsonを作成

次にtscコマンドでTypeScriptの型チェックが出来るようにします。

下記の内容でtsconfig.jsonをプロジェクトのルートに作成します。

{
   "compilerOptions": {
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "isolatedModules": true,
     "jsx": "react",
     "lib": ["es6"],
     "moduleResolution": "node”,
     "noEmit": true,
     "strict": true,
     "target": "esnext"
   },
   "exclude": [
     "node_modules",
     "babel.config.js",
     "metro.config.js",
     "jest.config.js"
   ]
 }

noEmit: trueを設定することでJavaScriptのトランスコンパイルはBabelに任せ、 tscコマンドはファイル出力はせず型チェックのみ行うようにしています。

上記の設定内容もReact Nativeの公式ドキュメントに従っています。

tscコマンドをnpm-scriptsのbuildに追加

次にtscコマンドをnpm-scriptsのbuildで実行できるようにpackage.jsonを修正します。

"scripts": {
     "build": "tsc",
     …
 },

追加できたら下記コマンドを実行します。

npm run build 

実行すると以下のようなエラーが表示されます。

> tsc
App.tsx:26:18 - error TS2304: Cannot find name 'React$Node'.
 26 const App: () => React$Node = () => {
                     
 App.tsx:35:12 - error TS2304: Cannot find name 'global'.
 35           {global.HermesInternal == null ? null : (
     
 Found 2 errors.

React$NodeはReact.ReactNodeに書き換え、
HermesInternalに関してはCannot find name ‘global’.ts(2304) のイシューを参考に修正します。

flowの設定ファイルを削除

TypeScriptテンプレートを利用せずにReact Nativeアプリを作成した場合、デフォルトではflowを利用するようになっています。

TypeScriptを利用する場合は不要なので、 下記コマンドで設定ファイルを削除します。

rm .flowconfig

終わりに

これでTypeScriptを利用してReact Native開発が行えるようになりました。

TypeScriptを利用してReact Native開発を行うことで、JavaScriptのコードのみでiOSとAndroid両方のアプリを開発することができます。

この記事では環境構築の手順を紹介していきました。こちらの記事では実際の画面の開発について解説しています。
ぜひ合わせてチェックしてみて下さい。

こうしたアプリ開発を外注してみるのはいかがでしょうか。 dehaソリューションズではオフショア開発によって低コストで迅速な開発をサポートしています。

Laravelに関して詳しくお話を聞きたい方、開発相談や無料お見積りをしたい方はこちらからご気軽にお問い合わせください。

▼ dehaソリューションへの簡単見積もりの依頼はこちら