🐺
Vue Router の name を使って型推論させる
はじめに
Vue Router を TypeScript で利用する際に、name を型推論させ、型による補完を受けられるようにした話です。
モチベーション
Vue Router のルート定義において、name を文字列リテラルとして扱い、型依存の補完による恩恵を受けたいという思い。
実装
Vue Router のルート定義を行う際に、as const アサーションを使用してルートオブジェクトを定義します。これにより、TypeScript は各ルートの name をリテラル型として認識し、型推論が可能になります。
const routes = [
{ path: '/general', name: 'Home', component: TopPage },
{ path: '/register', name: 'Register', component: RegisterPage },
{ path: '/login', name: 'Login', component: LoginPage },
{ path: '/profile', name: 'Profile', component: ProfilePage },
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFoundPage },
] as const satisfies readonly RouteRecordRaw[]
これにより、routes 配列内の各ルートの name はリテラル型として扱われ、型推論が有効になります。
※ satisfies 演算子で readonly RouteRecordRaw[] を指定することで、routes 配列が Vue Router のルート定義として正しいことを保証しています。
nameを利用する場合
type RouteName = (typeof routes)[number]['name']
// RouteName は 'Home' | 'Register' | 'Login' | 'Profile' | 'NotFound' 型になります
※ path を利用する際も同様に型推論が可能です。
navigate関数を作成する
routerをnavigateする関数を作成することで、型安全にルーティングを行うことができます。
function navigateTo(name: RouteName) {
router.push({ name })
}
まとめ
Vue Router のルート定義に as const アサーションを使用することで、path や name の型推論が可能になり、型安全なルーティングが実現できます。これにより、開発時の補完や型チェックが強化され、ハードコードによるミスを防ぐことができます。
Discussion