Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

React + TypeScriptプロジェクトをcreate-react-appに任せる

More than 1 year has passed since last update.

⚠注意

まず、この記事が書かれた日付と、以下のバージョンを確認してください。
この記事は公式ドキュメントへの案内程度の役割を持てたらな、と思っています。

$ npx create-react-app --version
npx: 63個のパッケージを4.086秒でインストールしました。
2.1.1

$ npm view typescript version
3.2.2

create-react-app と TypeScript

facebook社公式のReactプロジェクト生成ツール create-react-app ですが、2018/10/29リリースの v2.1.0 で TypeScriptを公式サポートするようになりました。

スクリーンショット 2018-12-18 12.43.38.png

以前までその役目を行っていたのが、create-react-appのforkリポジトリである react-scripts-tsでしたが、これを利用せずともcreate-react-appだけでTypeScriptを組み込めるようになったため役目を終えたようで、deprecatedとなってしまいました。

スクリーンショット 2018-12-18 12.44.39.png

新規にTypeScriptなReactプロジェクトを作る場合

以下のコマンドを叩くだけでいいみたいですね。

$ npx create-react-app my-app --typescript

create-react-appで作った既存のプロジェクトの場合

deprecatedとなった react-scripts-ts から create-react-appに以降しましょう。以下のブログ記事に移行方法が書かれています。

https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/

これをStep.1から順に行うと移行できます。

ハマったところ

トラブルシューティングを読めばだいたい解決するはず…!
https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/#troubleshooting

1. tslint, tslint-react が消えた

npm remove react-scripts-ts すると諸々のパッケージが消えますが、TSLintも消えます。
create-react-appの依存には含まれていないので、手動で追加しましょう。

$ npm install --save-dev tslint tslint-react

2. 大量の型エラーが出る

上であげたブログ記事にも書いてありますが、tsconfigのlibを指定しましょう。

https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/#value-not-found-property-does-not-exist-on-type-etc

3. tsconfigでなんか怒られる

これも記事に書いてありますが、予約されている、というかユーザーが指定できないtsconfigのパラメータがあります。それ以外の値を指定しましょう。

https://github.com/facebook/create-react-app/blob/87e3d4fd1080d290f675d0461e3d3656752628ab/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js#L105-L129

4. storybookが死ぬ

これも記事に書いてあります!

https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/#storybook

この手順に従えば動きましたが、Create React AppではBabelを使う一方でstorybookではTypeScriptを使うみたいですね。なんか複雑な感じに・・・。

Additionally, while Create React App uses Babel to parse JSX, Storybook expects TypeScript to do so.

おわりに

私はVueやNuxt.jsから近年のフロントエンドに触り始めたので、Reactはなかなか設定が多くて大変だなーと思ってしまいがちです。
今回create-react-appがTypeScriptをサポートしてくれたので、今後はひとつ手間が減ることになるのではないでしょうか。期待です。

namaozi
楽器を弾く魚類。音楽と麻婆豆腐が好き。 動画を投稿しています! https://www.nicovideo.jp/user/12881336/video
https://scrapbox.io/namaozi
dwango
Born in the net, Connected by the net.
https://dwango.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away