複数の状態を型で表現する方法

typeによって複数の状態を表現する方法で、react-router-domの実装を参考にしてみる。

いままでやっていたこと

export type FormData = Loading | Loaded

export type Loading = {
  state: 'loading'
  name: undefined
}
export type Loaded = {
  state: 'loaded'
  name: string
}

• 各状態ごとにtypeを作っているので関連性がわかりづらい
• exportするtypeが増える
  • exportするモノは少なければ少ないほどいい

react-router-domの実装

export type NavigationStates = {
    Idle: {
        state: "idle"
        location: undefined
        formMethod: undefined
        ...
    }
    Loading: {
        state: "loading"
        location: Location
        formMethod: Submission["formMethod"] | undefined
        ...
    }
    Submitting: {
        state: "submitting"
        location: Location
        formMethod: Submission["formMethod"]
        ...
    }
}
export type Navigation = NavigationStates[keyof NavigationStates]

• router.ts#L506-L539
• Idle状態のtypeを参照するにはNavigationStates["Idle"]とする
• NavigationStatesというtypeにまとめられているので関連性がわかりやすい