今更ながらtypescript-fsaが地味に便利だなという話

3日ぶりのブログ更新です。

「ゆるふわ技術日誌」なのに、技術のことでもない日記をつらつらと書くのも、精神的に来るものがあるので、これからは更新頻度を落としても技術的なことを書くブログにしていきたい所存。

---

久々にReactやりたいな(というかやらないと、書き方忘れそうだな)と思ったので、小さなアプリを作り始めました。

React + TypeScriptのプロジェクトを作るのも、いつのまにか

$ create-react-app hoge --typescript

でできるようになってるし、すごい。

Reduxのアクションやreducderは、普通のJSで書くのであれば、そのままてきとうに書けばいいのだが、TypeScriptとなると、型を当ててあげないとダメですね。(ダメってことはないけど、それならJS使う)

その時に便利なのがtypescript-fsa。

github.com

Reduxの型定義ファイルにも、Actionの型とか定義されてるけど、どうもいまいちなので、その辺をよしなにしてくれる。

import { Action } from "redux";
import actionCreatorFactory, { isType } from 'typescript-fsa';

const actionCreator = actionCreatorFactory('common');

export const signedIn = actionCreator<{ uid: string }>('SIGNED_IN');

interface StateType {
  uid: string | null;
}

const defaultState: StateType = {
  uid: null
};

export default (state: StateType = defaultState, action: Action) => {
  if (isType(action, signedIn)) {
    return {
      ...state,
      uid: action.payload.uid
    };
  }

  return state;
};

こんな感じ。

---

なんかもっと語るつもりだったけど面倒になってしまった。