TypeScriptでReact Native開発をする方法2018年最新版

はじめに

React Nativeでプロジェクトを作成するとデフォルトでFlowを使用したコードが出力されますが、既に他のプロジェクトで導入していたりしているなどの理由でTypeScriptを使用したいというケースもあるでしょう。今回は、React NativeプロジェクトでTypeScriptを使用する方法を解説いたします！

この記事はMicrosoftが公開している TypeScript-React-Native-Starter および react-native-typescript-transformer のREADMEの内容に沿っています。

セットアップ

React Nativeプロジェクト作成

プロジェクト作成直後という前提で説明しますので、適当な名前でプロジェクトを作成しましょう。

$ react-native init <プロジェクト名>
$ cd <プロジェクト名>

ライブラリのインストール

devDependenciesに依存関係を追加します。依存関係については、こちらの記事で詳しく説明しています！

$ yarn add --dev typescript react-native-typescript-transformer
$ yarn add --dev @types/react @types/react-native

typescript はTypeScriptの本体、 react-native-typescript-transformer はReact NativeからTypeScriptを読み込むために必要なライブラリです。
@types で始まるパッケージは DefinitelyTyped で管理されるTypeScriptの型定義です。他にnpmライブラリを使用する場合、追加で型定義が必要になるかもしれません。

tsconfig.json

$ yarn tsc --init --pretty --jsx react

というコマンドを実行すると以下のようなtsconfig.jsonが生成されます。（実際にはコメントがついていますが、省略しています）

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react", 
    "strict": true, 
    "esModuleInterop": true
  }
}

このままでも動きますが、以下の記述を追加します。

{
  "compilerOptions": {
    (省略)
   "allowSyntheticDefaultImports": true,
  },
  "exclude": [
    "node_modules"
  ]
}

allowSyntheticDefaultImports は型チェック時にdefault exportがないモジュールのdefault importを許可します。（型チェックのみで、動作には影響しない）
また、 exclude セクションで node_modules を指定することで対象ファイルが肥大化することを防いでいます。

rn-cli.config.js

以下の内容で、 rn-cli.config.js というファイルを作成します。React Nativeの動作時に react-native-typescript-transformer を使うようにする設定です。

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};

コードの書き方

JSXファイルのリネーム

App.js を App.tsx という名前に変更します。この時点で、TypeScriptとして解釈されます。シミュレータ上で動くことを確認してみましょう。

$ react-native run-ios

JSXを含むコードは .tsx 、含まないコードは .ts という拡張子を使います。

TypeScriptが動いていることの確認

JavaScriptにはなくてTypeScriptにはある private キーワードを使ってみましょう。

export default class App extends Component<Props> {
  private foo: string;  // 追加
  render() {

ここまでのセットアップがうまくいっていれば、リロードしても動くはずです。逆に、名前を App.js に戻すと動かなくなります。

型情報を使ってみる

試しに App.tsx のrender内に <FlatList /> というコードを追加してみましょう。FlatListは data という配列と renderItem というReact要素を返す関数が必須のプロパティです。

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Flatlist // 追加
} from 'react-native';

(省略)

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <FlatList />{/* 追加 */}

Visual Studio Codeなど、TypeScriptに対応したエディタを使っている場合、以下のようなエラーが出てコードを書いている時点で data と renderItem が必要だということが分かります！

おわりに

TypeScriptやFlowといったJavaScriptに型付けをおこなう仕組みは最初は面倒に感じるかもしれませんが、ドキュメントを読まないでもライブラリのプロパティが分かる、プロジェクトが大規模になってきたときに間違った使い方をされるのを防ぐなどの場面で絶大な効果を発揮します。
React Nativeの場合、プロジェクト作成後すぐにFlow使い始められますが、今回見たように少しの手順でTypeScriptを使うこともできますので、選択肢に加えてみてはいかがでしょうか。