Astro 2.1がリリースされました。
@astrojs/imag
のリリースがメインなのですが個人的にはInferGetStaticPropsType
の追加が嬉しかったです。
InferGetStaticPropsType
は Next.jsですでに実装されているのでNext.jsでは利用している人もいるかと思います。
Astroでのpropsの型定義はgetStaticPaths
と同じ階層にProps
という型を定義すると自動で紐付けられます。
export async function getStaticPaths() {
return [
{
params: { id: "foo" },
props: { text: "abcd" },
},
{
params: { id: "var" },
props: { text: "efg" },
},
];
}
interface Props {
text: string;
}
Next.jsのようにgetStaticProps
は必要なくgetStaticPaths
内でpropsも合わせて指定ができるようになっています。
型推論で定義できそうですが、推論を行おうとするとgetStaticPathsの型を紐解かなくてはいけないのでこれまでは面倒でした。
Astro 2.1からは InferGetStaticPropsType
を利用して以下のように簡潔に記述することができます。
import { InferGetStaticPropsType } from "astro"
export async function getStaticPaths() {
return [
{
params: { id: "foo" },
props: { text: "abcd" },
},
{
params: { id: "var" },
props: { text: "efg" },
},
];
}
type Props = InferGetStaticPropsType<typeof getStaticPaths> // { text: string; }
かなり直感的でわかりやすい型定義になったのではないでしょうか?
ちなみに、InferGetStaticPropsType
の型情報は以下のようになっております。
export type InferGetStaticPropsType<T> = T extends () => Promise<infer R> ? R extends Array<infer U> ? U extends {
props: infer P;
} ? P : never : never : never;
ちなみに今回、Astro 2.1ではInferGetStaticPropsType
だけではなくInferGetStaticParamsType
も追加されています。
InferGetStaticParamsType
propsだけでなくparamsもある程度実装により差異が発生する箇所なので合わせて型定義を行っておくと安全でしょう。
import { InferGetStaticParamsType, InferGetStaticPropsType } from "astro"
export async function getStaticPaths() {
return [
{
params: { id: "foo" },
props: { text: "abcd" },
},
{
params: { id: "var" },
props: { text: "efg" },
},
];
}
type Params = InferGetStaticParamsType<typeof getStaticPaths> // { id: string; }
type Props = InferGetStaticPropsType<typeof getStaticPaths> // { text: string; }