React始めました〜③TypeScriptで環境構築

概要

色々とバタバタして間が空いてしまいましたが、最近はまたReactを触り始めたので
環境構築の仕方やつまづいた部分を紹介できればと思います。

前提

TypeScriptやnode-sassがグローバル環境にインストールされていることを前提に進めます。

【環境】
OS：macOS Sierra 10.12.6
create-react-app@1.4.1
node-sass@4.5.3
npm@5.5.1
typescript@2.5.3

TypeScriptでReact

Reactは普通、jsxとbabelかと思うんですが、せっかくだしTypeScriptで
書けば両方覚えれて一石二鳥じゃん！と思ったのがきっかけです。

以下のようにReactプロジェクト作成コマンドにオプションを付けてあげれば、
一発で環境は出来上がります。

create-react-app my-app --scripts-version=react-scripts-ts

そして、cd my-appで移動しnpm startをすると通常のcreate-react-appコマンドで
作成したjsx形式のプロジェクトと同じ画面が立ち上がるかと思います。

私が最初、この方法を試した時にnode_modulesのどこかでエラーが出ましたが
パラメータの重複が原因だったみたいで一意にしたら直りました。
詳細を忘れてしまいましたが、エラーメッセージに出てくるファイルを
覗けば分かるかと思います。

{
  hoge:1,
  foo:2,
  hoge:1 // ←削除
}

また、再確認で先ほど実行してみたら以下のようなメッセージが。。。

/hoge/my-app/node_modules/@types/react-dom/index.d.ts
(16,43): error TS2305: Module '"/hoge/my-app/node_modules/@types/react/index"' has no exported member 'ReactPortal'.

なんじゃこりゃー！！
と思って調べてみると、どうやらreactのバージョンが低くなってしまい
react-domとのバージョンが合わなくなるのが原因みたいです（なんでや！）

package.json

〜省略〜
"devDependencies": {
    〜省略〜
    "@types/react": "^15.6.6", //←古いので修正
    "@types/react-dom": "^16.0.2"

  }

ってなっているので、以下のようにreactのバージョンを揃えてあげて
npm installしてからnpm startすると直りました。

package.json

〜省略〜
"devDependencies": {
    〜省略〜
    "@types/react": "^16.0.2",
    "@types/react-dom": "^16.0.2"

  }

Reactプロジェクトにnode-sassを入れる

このまま、TypeScriptとcssで書いていってもいいのですが、
欲張りなのでsassの自動ビルドも入れてTypeScriptとsassで書いていこうと思います。

先ほど作ったmy-appフォルダで下記コマンドを実行
npm install node-sass-chokidar npm-run-all

そして、package.jsonにsassファイルを変更したら自動でcssファイルに
ビルドしてくれるようscriptsを設定します。

※この辺り、詳しくは参考サイトが分かりやすいです。

package.json

〜省略〜
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-ts": "react-scripts-ts start",
    "start": "npm-run-all -p watch-css start-ts",
    "build": "npm run build-css && react-scripts-ts build",
〜省略〜

これで完成です。

参考

create-react-app で TypeScript の環境を作る
[@types/react-navigation] the type definition seems to be broken. #21294
create-react-appでSASSファイルを使う方法