typescript

2019-10-03

RNプロジェクトへ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"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

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

React Native CLIでTypescriptを始める

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

react-native init SampleProject --template typescript

typescriptでコーディングする。

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

  • Class Component
import * as React from 'react';
...
interface Props {}
interface State {}
...
export default class App extends React.Component<Props, State> {
  • Functional Component
import React from 'react';
...
interface Props {}
...
const App = ({  }: Props) => {
...
Buy me a coffeeBuy me a coffee
Posts