TOP テクノロジーReact Native React NativeのプロジェクトにTypeScriptを導入する方法 (2019年最新版)

React NativeのプロジェクトにTypeScriptを導入する方法 (2019年最新版)

by Mai Tran
0 コメント


はじめに

v0.57以降ではReact Nativeが公式でTypeScriptに対応しました。

Babel7でTypeScriptをトランスコンパイル出来るようになったため、
その仕組みをReact Nativeが利用する形で実現されています。

注意点としてはBabelは古いJavaScriptへのトランスコンパイルを行うだけで、
型チェックまでは行ってくれません。

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

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

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

まずは下記コマンドで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$NodeReact.ReactNodeに書き換え、
HermesInternalに関してはCannot find name ‘global’.ts(2304) のイシューを参考に修正します。


flowの設定ファイルを削除

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

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

rm .flowconfig

終わりに

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

今回は紹介していない機能がTypeScriptには沢山ありますが、
必要に応じて設定を追記していけば良いかと思います。

次回の記事では実際の画面の開発について書いていきます。
それではまた次回よろしくお願いいたします。

優秀なAI(画像処理・音声認識)開発、アプリ開発エンジニアを探している方へ

ベトナムでのオフショア開発でハイレベルエンジニアと低コストの開発を進めませんか

AI開発・アプリ開発実績豊富のdehaなら高品質のオフショア開発を実現します。

Dehaソリューションへの無料の簡単見積り依頼はこちらから

関連記事