BLOG

getStaticPaths()のpropsに自動で型づけをしてくれるInferGetStaticPropsTypeが便利

getStaticPaths()のpropsに自動で型づけをしてくれるInferGetStaticPropsTypeが便利

AstroページのgetStaticPaths()は、ダイナミックルートに対してどのページを構築すべきかを定義するために使用します。各ページに対して、paramsとpropsのプロパティを返します。

Astro 2.1では、これらの型を推論し、テンプレートでこれらの値を使用する際に型チェックを提供する2つの新しいヘルパーが追加されました。

以下のgetStaticPaths()関数があるとします:

---
// Example: src/pages/blog/[slug].astro
export async function getStaticPaths() {
	const posts = await getCollection("blog")
	return posts.map((post) => {
		return {
			params: { slug: post.slug },
			props: { draft: post.data.draft, title: post.data.title },
		}
	})
}
---

新しいInferGetStaticParamsTypeとInferGetStaticPropsTypeヘルパータイプを使用して、paramsとpropsの値の型定義を手動で定義する必要なく取得することができるようになりました:

import { InferGetStaticParamsType, InferGetStaticPropsType } from "astro"
export async function getStaticPaths() {
	/* ... */
}

type Params = InferGetStaticParamsType<typeof getStaticPaths>
type Props = InferGetStaticPropsType<typeof getStaticPaths>
const { slug } = Astro.params as Params
//                     ^? { slug: string; }
const { title } = Astro.props
//                      ^? { draft: boolean; title: string; }

BLOG一覧へ