Base.astro(親レイアウト)から下層ページ用レイアウトLower.astro(子レイアウト)を作成し、親のProps
に子のProps
をマージします。
まず、親レイアウトのProps
がこうだったとします。
Base.astro
---
export interface Props {
title?: string
description?: string
ogp?: {
type?: string
image?: string
url?: string
}
}
---
次に、Astroの型ユーティリティComponentProps
型を使って、子レイアウトから親レイアウトのProps
を参照します。
TypeScript
Astro組み込みのTypeScriptサポートの使い方を学ぶ。

あとは、子レイアウト側で型を継承してhoge
を追加して完了です。こうすることで、子レイアウトで親レイアウトも含めたProps
の補完がきくようになります。
Lower.astro
---
import type { ComponentProps } from 'astro/types'
import Layout from '@/layouts/Base.astro'
type BaseProps = ComponentProps<typeof Layout>
export interface Props extends BaseProps {
hoge?: string
}
---