AstroでgetStaticPathsで指定したpropsをTypeScriptの型推論で型情報を取りだす

AstroでgetStaticPathsで指定したpropsを型推論で取りだす

AstroでgetStaticPathsの返り値としてpropsが指定できます。

export async function getStaticPaths() {
  return [
    {
      params: { id: "foo" },
      props: { text: "abcd" },
    },
    {
      params: { id: "var" },
      props: { text: "efg" },
    },
  ];
}

TypeScriptで型指定を行いたい場合に、この場合はporpsの方は{ text:string }なのでファイル中に以下のような型定義を行えば型の指定が可能です。

export type Props = {
    text: string;
}

propsはgetStaticPathsの返り値として定義されているので頑張ればのgetStaticPaths返り値の型推論として取り出すこともできます。

以下のコードでは、`ReturnType`で返り値の型を取得してPromise内の配列内のオブジェクトのpropsの型を抽出しています。

export type Props = (ReturnType extends Promise
  ? T
  : never)[0]["props"];

可能ではあるものの、ややこしいだけなので別途型情報を明記したほうがよさそうです。

追記:Astro 2.1でもっと手軽に対応できるInferGetStaticPropsTypeが追加されました。

スポンサードリンク

«VSCodeでSveltKitのPrettierのフォーマッティングをエディタ保存時に適用する | メイン | Next.jsのAPI RoutesでAuth0の認可を実装する»