Astro 2.1で追加されたInferGetStaticPropsTypeが便利

Astro 2.1で追加されたInferGetStaticPropsTypeが便利

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; }

参考: Astro 2.1 | Astro