こんにちは。 SAW です。
最近、 水曜どうでしょう を Netflix で見始めました。
映像に時代を感じながら視聴しています (笑)
Nuxt のルーティングには、 Vue Router が利用されています。
Vue Router を利用すると、 URL 内に埋め込まれたパラメーター (以下 route parameter と表記) を Vue コンポーネントから取得できます。
以下の例では、 :id の部分にパラメーターの値が埋め込まれます。
/users/:id
route parameter で取得できるパラメーターの型は string|string[] のユニオン型 です。
TypeScript を利用している場合、変数への代入や関数の引数に渡す際に 型エラー を起こす場合があります。
本記事では、 Vue Router の route parameter を string 型に変換する方法 を紹介します。
なお、本記事で前提とする各パッケージのバージョンは以下の通りです。
- Nuxt: 3.8.0
- Vue Rouer: 4.2.5
対象読者
本記事で想定する読者層は次の通りです。
- Vue Router について基本的な知識を有している
- TypeScript について基本的な知識を有している
Vue Router で route parameter を取得する方法
Vue Router では、次の手順で route parameter の値を取得できます。
- Vue Router の
useRoute()を実行する - 1 で取得したオブジェクトの
paramsオブジェクトを参照する - 取得対象の route parameter を 2 で取得した
paramsのプロパティとして指定する
import { useRoute } from 'vue-router';
const route = useRoute(); // (1)
const { params } = route; // (2)
const id = params.id; // (3) :id に埋め込まれた値を取得
route parameter を string に変換する方法
続いて、本題である route parameter を string 型に変換する方法 について説明します。
route parameter を string 型に変換するには、以下のコード例のように型アサーションの as を利用して string 型にキャスト します。
import { useRoute } from 'vue-router';
const route = useRoute();
const id = route.params.id as string; // id: string
上記のコード例では、 route parameter である id が string 型に変換されます。
Vue Router における route parameter の型
ここからは、 route parameter を取得するために利用したオブジェクトについて、型を確認してみます。
まず、 useRoute() の返却型は RouteLocationNormalizedLoaded です。
このオブジェクトに、現在のパスやパラメーターなどの情報が格納されています。
次に、 params プロパティは RouteParams 型です。
公式ドキュメントや型定義を確認すると、 RouteParams は Record<string, RouteParamValue|RouteParamValue[]> と定義されています。
また、 RouteParamValue の型定義を確認すると、実体は string であることがわかります。
useRoute() の返却値から route parameter の型はそれぞれ以下のようになります。
const route = useRoute(); // route: RouteLocationNormalizedLoaded
const { params } = route; // params: RouteParams
const id = params.id; // id: RouteParamValue|RouteParamValue[]
補足: Record<Keys, Type> 型について
TypeScript の公式ドキュメントを確認してみると、 Record<Keys, Type> は Keys 型のキーを持ち、 Type 型の値を持つオブジェクトを構築する ユーティリティ型 と書かれています。
動的にキーを生成するようなオブジェクトで、キーと値の型を指定する場合に利用できます。
文章で説明するより、簡単なコード例を見たほうがわかりやすいでしょう。
Record<Keys, Type> 型を利用して座標を表す Coordinates 型の定義と使用例を以下に示します。
type Coordinates = Record<string, number>;
const point: Coordinates = {
x: 10,
y: 5,
};
console.log(`(x, y) = (${point.x}, ${point.y})`);
座標の変数名は string 型のキーで表現し、座標の値は number 型の値に対応付けして表現しています。座標の変数名は任意の文字列を指定できるため、オブジェクトリテラルでキーを指定したり、プロパティとしてアクセスできます。
Vue Router の RouteParams 型のキーは string 型で、値の実体は string|string[] のユニオン型で定義されています。
RouteParams 型は Record<string, string|string[]> 型で定義することで、任意のパラメーター名と値の対応を表しています。
まとめ
本記事のまとめは次の通りです。
- Vue Router で route parameter を
string型に変換する方法を紹介 - Vue Router の route parameter の型定義について説明
-
Record<Keys, Type>について説明
-
解決方法とあわせて型定義についても確認したことで Record<Keys, Type> について学ぶ良い機会になりました。
参考文献
「Vue / Nuxt利用者が気軽に情報を得ることができ、またVue / Nuxt初学者がまずここを訪ねてみる」 と思える、そんなVue / Nuxtの情報が集まる広場。ハードルは低く、わちゃわちゃと知見が集まる広場へ。 ✍️ Articles: Vue, Nuxt, related libraries
Discussion