ReactのRouterライブラリなどでパスの書き間違いを防ぎたいと聞かれたので、いくつかの方法を提示した際のメモ。

• ライブラリを利用する

  • パスの書き間違いを防ぐことを目的としたライブラリは既にいくつかある。

• パスを生成する関数や変数をページ毎に記述する。

  • Pageコンポーネントのプロパティとして生やす実装

    export const UserPage = () => {}
    UserPage.path = (id: string) => `/users/${id}`
    
    <Link href={UserPage.path(id)}>User</Link>

  • React RouterにあるgeneratePathのような関数を利用する

    export const userPagePath = "/users/:id";
    
    generatePath(userPagePath, { id: "42" });

• Linkコンポーネントなどのパスを利用する型を拡張する

  1. パスを定義したオブジェクトを定義している場合

     // React RouterのuseRoutesなどを想定
     const routes = [
       { path: "/", element: <Dashboard /> },
       { path: "team", element: <AboutPage /> },
     ];
     
     // 実際はネストしたパスやパスパラメータを持ったパスがあるため、もっと複雑な型を書く必要がある
     declare module "react-router-dom" {
     	export interface LinkProps extends ... {
     		href: typeof routes[number]["path"]
     	}
     }

• パスを生成する関数や変数を解析して生成する

  • pathpidaなどはこれ

• TSServerを利用してパスを利用する型を拡張する

  • Next.jsのtypedRoutesは恐らくこれ

• 書き間違いを許容する

  • パスの追加や変更は開発初期を除いて滅多にあることではないため、（特にファイルを生成するためのコマンド実行が開発時に求められるような方法は）オーバーエンジニアリングであるという意見の人もいる。

• パスの遷移を確認するテストを書く

  • 網羅的にLink毎のテストを書くのは不毛かもしれない
  • CIで走らせるようにすれば開発時にコマンドを実行させられるより健全