【React & TypeScript】開発環境のセットアップ方法を丁寧に解説！

TypeScriptがReactに自然にフィットするのは、TypeScriptが本格的なJSXコンパイラであることだけではありません。つまり、巨大なビルディング・セットアップが必要ないということだ。TypeScriptには、必要なものがすべて含まれているのです。必要なもののひとつは、バンドルツールだ。Parcelは簡単に設定できる一つの選択肢だが、Webpackを使うこともできる。

インストールするnpmパッケージ
- 開発における依存関係
- 依存関係について
tsconfig.jsonのコンパイラオプション

インストールするnpmパッケージ

開発における依存関係

npm install -D [パッケージ名] または yarn add –dev [パッケージ名] でインストールします。

typescript ：この記事ではv3.0.1
@types/react ：この記事ではv16.4.11を使います
@types/react-dom ：この記事ではv16.0.7を使います

$ npm install -D typescript
$ npm install -D @types/react 
$ npm install -D @types/react-dom

もしくは

$ yarn add --dev typescript
$ yarn add --dev @types/react 
$ yarn add --dev @types/react-dom

依存関係について

npm install -S [パッケージ名] または yarn add [パッケージ名] でインストールしてください。

react ：この記事ではv16.4.1を使用します。
react-dom ：この記事ではv16.4.1を使用します。
tslib ：TypeScriptヘルパーのためのランタイムライブラリ。この記事ではv1.9.3を使用しています。

tsconfig.jsonのコンパイラオプション

ReactをTypeScriptとスムーズに連携させるためには、いくつかのコンパイラオプションを設定する必要があります。

ここでは、最も重要なものを紹介します。

{
  "compilerOptions": {
    ...
    "jsx": "react",
    ...
}

React Nativeを使用する場合はreact-native、JSXをそのまま使用する場合はpreserveを指定します。

preserveは、後でBabelや定義済みのセットアップでコンパイルする場合に意味があります。

{
  "compilerOptions": {
    ...
    "jsx": "react",
    "jsxFactory": "h",
    ...
}

今回はReact.createElementの代わりに、当該ライブラリ(h)のそれぞれの仮想DOM実装を使用します。

シンセティック default import

TypeScriptはESモジュール表記をサポートしています。以下のコマンドでReactをインポートすることができます。

import * as React from 'react'

しかし以下の書き方の方がちょっとだけ良いと思います。

import React from 'react'

ほとんどの場合、型定義やReactの機能を非構造化でインポートできるからです。

import React { Component, FunctionComponent } from 'react'

これを実現するためには、allowSyntheticDefaultImportsとesModuleInteropの両方をtrueに設定する必要があります。

{
  "compilerOptions": {
    ...
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    ...
}

ライブラリ

クライアントサイドの開発には、Reactを使用します。

そのため、これに対応するためにいくつかのライブラリをインポートする必要があり、ES 2015とDOMをインポートしています。

DOMでは、Event、HTMLノード、…といったものの型定義が得られます。

{
  "compilerOptions": {
    ...
    "lib": [
      "dom", "es2015"
    ],
    ...
}

デコレーター

デコレーターは、Angularが独自のプログラミング言語からTypeScriptに切り替えたときに、実験的に追加された言語機能です。

それ以来、Decoratorは非常に人気があり、TC39ではJavaScript言語にどのように組み込むのがベストなのか、多くの議論が交わされました。

{
  "compilerOptions": {
    ...
    "experimentalDecorators": true,
    ...
}

まだステージ2なので、TypeScriptではフラグをオンにした場合のみ機能します。

通常のReactのタスクには必要ないですが、MobXのようなツールを使い始めると、便利になるかもしれない。