2018年7月13日

プログラミング

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

目次

  1. はじめに
  2. セットアップ
  3. コードの書き方
  4. おわりに

はじめに

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

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

ちょっと一言

TypeScript-React-Native-Starter のコミット履歴を見ると2018年3月に今回の方法へと更新されていて、それ以前はtscコマンドを使ってsrc以下を別ディレクトリにトランスパイルする方法が記述されていました。そのため調べるとそちらの内容を紹介している記事が多くヒットしますが、本記事では新しい内容でご紹介させていただきます。

セットアップ

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.jsApp.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に対応したエディタを使っている場合、以下のようなエラーが出てコードを書いている時点で datarenderItem が必要だということが分かります!
App_tsx_—_MyTypeScriptProject.png (93.7 kB)

おわりに

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

0

0

AUTHOR

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP