プロジェクトを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での開発におすすめな本を紹介している記事もあるので、ぜひこちらもご覧ください。
