🍣

【ReactNative】Typescriptでのセットアップ手順

に公開
React Native
TypeScript
初心者
tech

はじめに

この記事は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から参照されているため内容を修正します。

index.js
- import App from './App';
+ import App from './src/App';

tsconfig.jsonの作成

Typescriptで記載していくのでtsconfig.jsonを作成します。

touch tsconfig.json

内容は以下の通りです。
普段から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"
    ]
}

jest.config.jsの作成

touch jest.config.js
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が立ち上がり、下記の画面が表示されます。

default_screen

エラー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に画像を参照してチェックを入れましょう。

main.jsbundle

ホットリロードがかからない

ReactNativeはホットリロードに対応しているのですが、デフォルトで機能しないことがあるようです。
その場合はCmd + Dでデバッグメニューを開きConfigure Bundlerを選択します。

画像に従ってbundleのパスを指定します。パスはデフォルトなら以下の通りです。

  • 127.0.0.1:8081

configure_bundler

まとめ

今回はReactNative + Typescriptのセットアップ手順について解説しました。
多少のバージョンの違いはあれど、私が過去に実際に開発したスマホアプリと同じ構築方法なので実用的な内容になったのではないかと思います。

需要があれば、将来的には色々なライブラリを組み合わせたアプリ開発のハンズオンを公開しようと思います。
その際もこのセットアップ基準にしようと思っているので、定期的にブラッシュアップしていこうと思います。

Discussion