React NativeプロジェクトにTypeScriptを導入する手順

投稿日：2020年9月22日更新日：2021年5月2日

React NativeプロジェクトをTypeScriptで作成したい。
プロジェクトをTypeScriptに変更したい。

このような疑問に答えます。

TypeScriptはJavaScriptから派生した言語で、最大の魅力は型定義ができることにあります。

今回は、React NativeプロジェクトにTypeScriptを導入する方法を紹介します。

※この記事は、2020年9月時点、React Native公式ホームページで推奨されてる、TypeScriptの導入方法を参考にして紹介します。
詳しくはReact Nativeの公式ホームページのUsing TypeScriptをご覧ください。

○この記事の内容

TypeScriptで新規React Nativeプロジェクトを作成する方法
既存のReact NativeプロジェクトにTypeScriptを導入する方法

＜スポンサーリンク＞

TypeScriptで新規React Nativeプロジェクトを作成する方法

React Nativeを使用するための環境構築を行ってない場合は、先に環境構築を行ってください。
環境構築については、React Nativeの環境構築の手順【Windows版】をご覧ください。

TypeScriptでReact Nativeのテンプレートプロジェクトを作成します。

①　PowerShell、またはコマンドプロンプトを管理者として実行し、プロジェクトを作成したいディレクトリに移動します。

②　TypeScriptで新規プロジェクト作成のため、以下のコード実行します。

npx react-native init [プロジェクト名] --template react-native-template-typescript

このコマンドは公式ホームページのUsing TypeScriptに掲載されています。

③　エクスプローラーで作成したプロジェクトを開き、プロジェクト直下にApp.tsxファイルがあるか確認します。

App.tsxファイルがあれば、TypeScriptでのReact Nativeプロジェクトの作成完了です。

既存のReact NativeプロジェクトにTypeScriptを導入する方法

ファイルを作成することになるので、エディタを用意しましょう。おすすめはVSCodeです。

VSCodeのインストール手順はVisual Studio Codeのインストールと日本語化の手順【Windows版】をご覧ください。

では、既に作成してあるReactNativeプロジェクトにTypeScriptを導入する方法を紹介します。

①　PowerShell、またはコマンドプロンプトを管理者として実行し、TypeScriptを導入したいプロジェクトのディレクトリに移動します。

②　TypeScriptと開発に必要な型定義ファイル、テストツールのjestをインストールするために、以下のコードを実行します。

npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
# yarnを使用の場合
yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer

このコマンドは公式ホームページのUsing TypeScriptに掲載されています。

③　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"
  ] 
}

このコードは公式ホームページのUsing TypeScriptに掲載されています。

④　jestでTypeScriptのテストができるように設定ファイルを作成します。

プロジェクト直下にjest.config.jsファイルを作成して、以下のコードを記述してください。

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

このコードは公式ホームページのUsing TypeScriptに掲載されています。

⑤　プロジェクト内の設定ファイル以外のJavaScriptファイル拡張子を.tsxに変更します。

注意：./index.jsはそのままにしておきましょう。

⑥　プロジェクトを実行し、無事に実行できたらTypeScriptの導入は完了です。

＜スポンサーリンク＞

最後に

以上がReactNativeプロジェクトへのTypeScriptの導入方法となります。

公式ホームページも参照しながら、ぜひ参考にしてみてください！

また、ReactNativeとTypeScriptでの開発におすすめな本を紹介している記事もあるので、ぜひこちらもご覧ください。

React NativeとTypeScriptの開発におすすめな本

執筆者：tegral