昨日は Redux を typescript なしで入門した。今日は Typescript を使って入門する。
記事を見てると、redux と typescript の相性はあまりよくないみたいで、それを補助するライブラリが別途必要になるようだった。
一旦上の話は忘れて、昨日作成したRedux アプリに Typescript を入れてみる。React 入門(2) を参考にして入れた後、npm run build
する、色々エラーが出るので、エラーメッセージに基づいてエラーを消していく。import
関連のエラーはどうやったらいいのかわからなかったのでここの3番目の(import ではなく requireを使う)方法で解決させた。あとはもう一つよくわからないエラーが発生していて Binding element 'dispatch' implicitly has an 'any' type
というやつがそれだ。調べるとここ に答えそのものが書いてあった。なんだか冗長なような気もするが、一旦動かすという意味では問題ないかな。
エラーが全部消えたので npm start
で実行してみるものの、Expected the reducer to be a function.
というエラーがブラウザ上で発生。色々調べた結果、require を使っていることが原因のようだったので、import に戻して、仕方なく、d.ts
定義ファイルを書こうかな。と思ってふと考えなおし、npm i @types/redux
を実行。しかし解決せず。ふと reducers 下のファイルを見てみると .js であることに気付く。.ts に変更して、再ビルドすると、タイプエラーがいくつかでたのでそれも修正して、npm start する。先ほどのエラーは消えていて、タスク追加のボタンとテキストボックスも表示されている。しかし、次の問題が発生する。タスクを追加しようとしても何も反応がない。DevToolsを見てみると、Uncaught TypeError: addTodo is not a function
が発生していた。そういえばaddTodo
もrequireしていたことを思い出す。その部分を修正し、actions/index.js も ts に変更し、タイプエラー関係を修正し再度 npm start
。今度はちゃんとタスクも追加されてちゃんと動いているようだ。
ただこれだと代替が any 型になってしまっていて、typescript を使っている恩恵を得られない気がするので、次回はそのあたりをどうにかしたいですね。
成果物は以下にアップしている。
GitHub - bamchoh/redux-study at ts
2019/1/31 追記
anyの型をある程度修正したものを以下にアップした。普通に interface
を定義していくだけだったので、特に書くこともないと思い、成果物のみリンクしておく。