{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/typescript-react-usestate-dispatch-generic",
  "path": "/posts/typescript-react-usestate-dispatch-generic",
  "publishedAt": "2025-01-11T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "react",
    "型",
    "Dispatch",
    "ジェネリック型"
  ],
  "textContent": "useStateの型\n\nuseStateの状態管理関数をPropsで渡すとき、受け取る側は\n\nという方で受け取ることになる。\n\nジェネリクスのメリットがいまいち\n\n関係ないけどずっと気になっていた「ジェネリクスのメリットがいまいちピンとこない件」について、ついでに調べてみることにした。\n\n例えば、\n\nという関数が存在した時、\n\nこんな感じにまとめたくなる。\n\nこれをジェネリック型にすると、\n\nこんな感じになる。\n\n型ガードが必要\n\n同じように感じるけど、returnTextOrNumberの場合は、\n\nstringとnumberのどちらが返ってくる確定していないので、コンパイルエラーが出る。\n\n実行するためには\n\nのように型ガードする必要がある。\n\nコンパイラーをだませる\n\nbは0なのでlengthが存在しないが、as stringで強制的に文字列とコンパイラーと認識させられる。\n\nこれはコード的負の遺産になる。\n\nジェネリック型は堅牢でコード量が少ない\n\n対照的にジェネリック型であるreturnTextOrNumberGeneric の場合は、\n\n関数実行時に入出力共に型を指定し確定できるので、コンパイルエラーがでない。\n\nまた\n\n強制的に異なる方でコンパイラーを納得させようとしても不可能になり、堅牢制が向上した。\n\n実際に整理してみるとジェネリック型の恩恵がよくわかった。",
  "title": "useStateの型、Dispatch<SetStateAction<T>> についてとジェネリック型"
}