How to import an astro component's interface Props type?

[quiet grail]

Example if I have a component: PostView

Which has

interface Props {
key: string;
}

How can I reference this astro component's Props type?

[winged robin]

Hi @quiet grail. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To reference the props type of an Astro component (such as PostView), you should use the ComponentProps utility type from astro/types. This allows you to infer the props type of a component, even if the Props interface is not exported from the component itself.

Here’s how you can do it:

import type { ComponentProps } from "astro/types";
import PostView from "./PostView.astro";

type PostViewProps = ComponentProps<typeof PostView>;

This PostViewProps type will now match the Props interface defined inside your PostView.astro component. This is the recommended and type-safe way to reference another Astro component’s props type, as described in the Astro documentation Type Utilities and in the Starlight guide Component props.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: