Redux 入門 (2) ~ Redux & Typescript

昨日は 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を定義していくだけだったので、特に書くこともないと思い、成果物のみリンクしておく。

GitHub - bamchoh/redux-study at revise_types