React Native

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

投稿日:2020年9月22日 更新日:

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

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

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

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

※この記事は、2020年9月時点、React Native公式ホームページで推奨されてる、TypeScriptの導入方法を参考にして紹介します。
詳しくはReact Nativeの公式ホームページのUsing 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の開発におすすめな本

広告

<スポンサーリンク>

広告

<スポンサーリンク>

-React Native
-

執筆者:

関連記事

【React Native】classとfunction、どちらを使うのか

classとfunctionの違いを知りたい。 どちらを使ったらいいのかわからない。 このような疑問に答えます。 React Nativeには、classとfunctionがあり、どちらを中心に使えば…

もっと見る

React Nativeの環境構築の手順【MacOS版/M1対応】

MacOSでReact Nativeの開発環境を構築する方法を知りたい。 iOS、Android、それぞれの開発に必要なツールが知りたい。 このような疑問に答えます。 この記事では、MacOSでRea…

もっと見る

android-phone

アプリ開発でReact Nativeを使うメリットとデメリット

React Nativeって何? React Nativeを使うメリットが知りたい。 このような疑問に答えます。 アプリ開発を始めるときに、どのフレームワーク、どの言語を選べばいいか迷うと思います。 …

もっと見る

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

React NativeとTypeScriptのおすすめな本を知りたい。 このような疑問に答えます。 React NativeとTypeScriptの日本語の情報はまだ少なく、中々見つかりません。 そ…

もっと見る

React Nativeでclassをfunctionに変換する10ステップ

React Native のclassをfunctionに変換したい。 このような疑問に答えます。 React Nativeでモバイルアプリ開発をするとき、functionで作りたくても、多くの資料は…

もっと見る


comment

メールアドレスが公開されることはありません。

プロフィール

プロフィール

海外経験14年の帰国子女。
未経験からエンジニアに転職。
開発を中心にPLとして活動中。

詳しいプロフィールはこちらから。

広告

<スポンサーリンク>