React NativeでTypeScriptを使う方法

2021-07-04 hit count image

React NativeプロジェクトへTypeScriptを適用して開発してみよう。

React Nativeプロジェクト生成

下記のコマンドを使ってReact Nativeのプロジェクトを生成します。

react-native init proejct-name

TypeScriptへ必要なライブラリをインストール

TypeScriptが動作出来るようにするため必要なライブラリをインストールします。

npm install typescript @types/react @types/react-native --save-dev

TypeScriptライブラリ

  • typescript: TypeScriptをインストール。
  • @types/react: TypeScriptへ必要なreactのtypeをインストール。
  • @types/react-native: TypeScriptへ必要なReact Nativeのtypeをインストール。

TypeScript設定

TypeScriptを設定してReact Nativeが動作出来るようにします。

tsconfig.jsonを作る

プロジェクトのrootフォルダへtsconfig.jsonファイルを作成して下記の内容をコピペします。

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6", "es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "skipLibCheck": true
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

詳しい内容は公式ホームページを参考してください。

React Native CLIでTypeScriptを始める

このような設定がやりたくない場合、下記のReact Native CLIコマンドでTypeScriptをベースにするReact Nativeプロジェクトを生成することが出来ます。

npx react-native init SampleProject --template react-native-template-typescript

TypeScriptでコーディングする

App.jsをApp.tsxにファイル名を変更してTypeScriptスタイルでコーディングします。

  • Class Component
import React from 'react';
...
interface Props {}
interface State {}
...
export default class App extends React.Component<Props, State> {
  • Function Component
import React from 'react';
...
interface Props {}
...
const App = ({  }: Props) => {
...

完了

これでReact NativeでTypeScriptを適用してTypeScriptを使う方法についてみてみました。今からReact NativeプロジェクトでもTypeScriptを使ってタイプをチェックしてみてください。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

Posts