【ReactNative】Typescriptでのセットアップ手順
はじめに
この記事はReactNative + Typescript
のセットアップ方法についてまとめた記事です。
自分の中でReactNative
+様々なライブラリを使ったスマホアプリ開発というネタはありますが、如何せんセットアップができないことにはそれらの記事も意味を為さないと思い作成しました。
公式チュートリアルの内容に多少色をつけたような内容ですが、その途中で遭遇したエラーについての対処法もまとめてあります。
前提条件
以下を想定しています。
MacOS Catalina@10.15.6
XCode@12.0.1
VSCode@1.50.1
node@10.18.1
react@16.13.1
react-native@0.63.3
パッケージマネージャーはyarn
を使用していますが、npm
に読み替えていただいても構わないです。
プロジェクト作成
下記コマンドでプロジェクトを作成します。
プロジェクト名はReactNativeTS
とします。
npx react-native init ReactNativeTS --template react-native-template-typescript
作成が終わったらプロジェクト直下(以下、ルート)へ移動します。
以降ソースを修正する箇所もあるため、同時にVSCode
も起動します。
cd ReactNativeTS
code ./
関連ライブラリのインストール
下記コマンドで関連するライブラリをインストールしていきます。
いずれもTypescript
で開発するにあたって必要な型定義情報です。
yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
src
ディレクトリの作成
デフォルトではルートにソースが置かれているためsrc
ディレクトリを作成し、ファイルを移動させます。
このタイミングで*.js
ファイルを*.tsx
ファイルに変換します。
デフォルトで移動するのはApp.js
のみです。
mkdir src
mv App.js src/App.tsx
index.js
の参照を変更
今移動したApp.tsx
はルートのindex.js
から参照されているため内容を修正します。
- import App from './App';
+ import App from './src/App';
tsconfig.json
の作成
Typescript
で記載していくのでtsconfig.json
を作成します。
touch tsconfig.json
内容は以下の通りです。
普段からTypescript
を使っている場合は、下記に加えてお好みの設定を追加してもらっても構いません。
{
"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"
]
}
jest.config.js
の作成
touch jest.config.js
module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};
コンパイル
下記コマンドでコンパイルを行います。
yarn tsc
バージョンが前提条件の通りなら、恐らく下記のエラーが出ると思います。
src/App.tsx:27:18 - error TS2304: Cannot find name 'React$Node'.
27 const App: () => React$Node = () => {
~~~~~~~~~~
src/App.tsx:36:19 - error TS2339: Property 'HermesInternal' does not exist on type 'Global & typeof globalThis'.
36 {global.HermesInternal == null ? null : (
~~~~~~~~~~~~~~
どちらもApp.tsx
で発生しているエラーなので対応していきます。
それぞれのエラーを解消したらもう一度yarn tsc
を行いましょう。
React$Node
を修正
デフォルトでReact$Node
というモジュールを使用していますが、正しくはReact.ReactNode
です。
- const App: () => React$Node = () => {
+ const App: () => React.ReactNode = () => {
HermesInternal
を解決
global.HermesInternal
が解決できていないため定義を行います。
const App ...
より前に下記を追加。
+ declare const global: {HermesInternal: null | {}};
実行
下記コマンドで実行します。
正常に動作した場合はSimulator
が立ち上がり、下記の画面が表示されます。
エラーTips
手元の環境では、実行の段階で正常にアプリが起動しない場合がありました。
どうも環境依存のようなのでTips
として対処法を残しておきます。
「他にもこんなエラーが出た」 等々ありましたらコメントに記載いただけると有難いです。
「No bundle URL present」エラー
上記のエラーが発生した場合は、main.jsbundle
ファイルを生成する必要があります。
package.json
のscripts
に以下のスクリプトを追記しましょう。
+ "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
そのまま追加したコマンドを実行します。
yarn build:ios
こうすることでios/main.jsbundle
が生成されます。
続いてXCode
からios/ReactNativeTS.xcworkspace
を開きます。
ReactNativeTS/ReactNativeTS
のディレクトリ配下にあるmain.jsbundle
を選択して、右側メニューからTargetMemberships
に画像を参照してチェックを入れましょう。
ホットリロードがかからない
ReactNative
はホットリロードに対応しているのですが、デフォルトで機能しないことがあるようです。
その場合はCmd + D
でデバッグメニューを開きConfigure Bundler
を選択します。
画像に従ってbundle
のパスを指定します。パスはデフォルトなら以下の通りです。
127.0.0.1:8081
まとめ
今回はReactNative + Typescript
のセットアップ手順について解説しました。
多少のバージョンの違いはあれど、私が過去に実際に開発したスマホアプリと同じ構築方法なので実用的な内容になったのではないかと思います。
需要があれば、将来的には色々なライブラリを組み合わせたアプリ開発のハンズオンを公開しようと思います。
その際もこのセットアップ基準にしようと思っているので、定期的にブラッシュアップしていこうと思います。
Discussion