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
-

執筆者:

関連記事

ESLintとPrettierの導入【React Native & TypeScript】

React NativeとTypeScriptで開発する場合の便利なツールを知りたい。 ESLintやPrettierをプロジェクトやVSCodeに導入する方法が知りたい。 このような疑問に答えます。…

もっと見る

React Nativeのおすすめの勉強法と進め方【環境構築から学習まで】

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で作りたくても、多くの資料は…

もっと見る

android-phone

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

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

もっと見る


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

プロフィール

プロフィール

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

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

広告

<スポンサーリンク>