2017-09-30 追記 : 本記事の内容ではなく TypeScript-React-Starter をみると良さそうです。 (コメント参照。)

React アプリケーションのプロジェクトのひな形を作ってくれる Create React App でプロジェクトを作成し、TypeScript を使えるようにするメモ。

TypeScript で開発できるようにする (テスト以外)

基本的には「create-react-appでTypeScript用のReact開発環境を作る(入門者向け)」の教えにしたがうと TypeScript で開発できるようになる。ありがたい情報。

ただ、このままだと yarn run test でテスト実行しようとしてもインポートに失敗してテストに落ちてしまう。 (ですよね？)

テストも TypeScript 化する

上記の通り、上の手順だけではテストが実行できないので、テストを実行できるようにする。

テストファイル (src/App.test.js) を JS のままでテストが動くようにすることもできなくはないと思うが、テストファイルを TypeScript 化した方がテスト実行できるようにしやすいだろうし開発もしやすいだろうので、テストファイルを TypeScript 化する。

Jest についてあまり詳しくないので、もっといい方法があるかもしれない。 (指摘お願いします。)

Jest が TypeScript のテストファイルを扱えるように変更

まずは Jest (Create React App でセットアップされる JS テストフレームワーク) が TypeScript ファイルを認識するようにする。

ts-jest という npm モジュールを使用する。

yarn add ts-jest --dev

上記コマンドで ts-jest を依存に追加して、下記設定を project.json に追加。 (ts-jest のドキュメントの例通り。)

{
  "jest": {
    "transform": {
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  }
}

テストファイルを TypeScript 化

んでもってテストファイル (src/App.test.js) を TypeScript 化する。 Jest が提供する関数を使っているので、型定義ファイルを依存に追加する。

yarn add @types/jest --dev

んでもってファイルの拡張子を .tsx に変更し、ファイルの先頭行あたりを以下のように書き換える。

-import React from 'react';
-import ReactDOM from 'react-dom';
+/// <reference types="jest" />
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';

これで完了。

`<reference types="..." />` について

この形の 3 連スラッシュディレクティブが使えるのを知らなかったのだけど、多分 TypeScript 2.0 で導入されたっぽい。 @types/jest が提供する型定義ファイルはモジュール形式じゃないので import で読み込めないのだけど、<reference types="jest" /> によって参照することができる。

Triple-Slash Directives (/// <reference types="..." />)

これ欲しかったやつなのでありがたい。

変更全体

こういう感じ : https://github.com/nobuoka/my-react-typescript-app/commit/59dc5eeffb29e8834efd2f89ffaa1b2e77fb6197

感想

React アプリケーションを TypeScript で書きたい人は多いと思うのだけど、TypeScript 込みの開発環境の構成をいい感じに作ってくれるやつが見当たらない気がする。

Create React App に対しても TypeScript オプション追加の要望が上がってたけど却下されてるし、Create React App の README で紹介されている代替プロジェクト (nwb とか neo とか kyt とか) を見てみても TypeScript サポートはなさそう。まあ自分で構成したらいいんだけども。 TypeScript 推しな Angular と比べると React 界隈はそこまで TypeScript 推しではないのかなー、と思ったり。 (Facebook には Flow があるから？)

それはともかく web フロントエンド開発のビルド環境をどうするかは悩ましいところなので、こうやってひな形を作ってくれるものがあるのはありがたい。

Create React App による React アプリに TypeScript を導入してテストも TypeScript 化