Routifyでparamsに補完を効かせたい

結論

src/ambient.d.ts

declare module '@roxi/routify' {
  export const params: import('svelte/store').Readable<{
    userId: string
    postId: string
  }>
}

対象者

• Svelte + Routify + TypeScript構成の人
• $paramsの補完が効かなくて困っている人

概要

svelteでファイルベースのルーティング(Next.jsみたいなやつ)をしたい場合、Sapper, SvelteKit, Routifyあたりが選択肢としてあります。SapperはSPAモードがなく、SvelteKitは現時点(2021/09/16)ではSPAとしてビルドするときにSSGの挙動をしてしまう問題などがあるため、SPAを作りたい場合はRoutifyが選択肢として上がります。

困りごと

Routifyで/users/:userIdのようなパスのuserIdを取り出したい場合、以下のコードでいけます

import { params } from '@roxi/routify'
$params.userId // <--

しかし、$paramsの型は{[x: string]: any;}であるため、全く補完が効きません。

解決方法

アンビエント宣言で型を上書きします。

src/ambient.d.ts

declare module '@roxi/routify' {
  export const params: import('svelte/store').Readable<{
    userId: string
    postId: string
  }>
}

基本的に、ライブラリのリポジトリから型定義を探せば、上書きする方法は何となく分かるはずです。
https://github.dev/roxiness/routify/blob/master/index.d.ts

なお、この方法だと、

• /users/:userIdではuserIdのみを補完にだし、
• /users/:userId/posts/:postIdではuserIdとpostIdを補完にだす

のようなことはできません。どのページでも共通の補完となってしまいます。
でも補完が効かないよりはマシなはず。