【React/Redux】プロパティ 'hoge' は型 'DefaultRootState' に存在しません。

はじめに

普段はVueを使っていますが、業務でReactを使うことになったのでreact-reduxを試しに使ってみたところプロパティ 'router' は型 'DefaultRootState' に存在しません。というエラーに遭遇したので対処法をメモしておきます。

状況

• React × Redux × TypeScript
• Action/Reducer/Storeは既に作成済み
• storeのrouterプロパティをHooksでアクセス
• コンポーネント内でエラーが発生

該当箇所

src/components/Hoge/index.ts

import { useDispatch, useSelector } from 'react-redux'

// ~ 省略 ~

const Hoge: React.FC = () => {
  const dispatch = useDispatch()
  const selector = useSelector((state) => state)

  // ここで該当のエラーが発生
  console.log(selector.router)

// ~ 以下略 ~

HooksのuseSelectorを使ってstateにアクセスしようとしたところ、router?そんなものは知らん。おととい来やがれ。と怒られてしまいました...
console.log(selector)だとアクセスできたので、純粋に型定義が出来ていないだけ？

対応

という事でとりあえず型定義をしてみる。

src/types/index.ts

export interface IRouterLocation {
  hash: string
  pathname: string
  query: object
  search: string
  state: object
}

export interface IRouter {
  action: string
  location: IRouterLocation
}

// 多分この子を呼んであげると良いはず
export interface IRootState {
  router: IRouter
}

定義した型を当てる

src/components/Hoge/index.ts

import { useDispatch, useSelector } from 'react-redux'
import { IRootState } from '@types' // 定義した型を呼んであげる

// ~ 省略 ~

const Hoge: React.FC = () => {
  const dispatch = useDispatch()
  // stateに型を当ててあげる
  const selector = useSelector((state: IRootState) => state)

  // ひとまずエラーは消えた
  console.log(selector.router)

// ~ 以下略 ~

確認

ブラウザで確認してみる...

OK!!!

結果

どうやらRootStateの型がなかっただけの模様。
typeofで型を作ってあげた方が早そうですが、今回は一時凌ぎとしてお許しください。