Astro component props

[magic spire]

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

---

In Astro components, props are passed down using attributes when the component is used. Here's how it works:

1. Defining props: In the component file, you define the props using the Astro.props object in the frontmatter section. You can destructure the props you expect to receive:

---
const { greeting, name } = Astro.props;
---

2. Passing props: When using the component, you pass the props as attributes:

<GreetingHeadline greeting="Hi" name={name} />

3. Accessing props: Inside the component, you can then use these props in your template:

<h2>{greeting}, {name}!</h2>

You can also define prop types using TypeScript interfaces for better type checking:

---
interface Props {
  name: string;
  greeting?: string;
}

const { greeting = "Hello", name } = Astro.props;
---

This allows you to set default values and define required props Component Props (https://docs.astro.build/en/basics/astro-components/#component-props).

It's important to note that props in Astro are passed from parent to child components and are available during server-side rendering. They cannot be updated client-side unless you're using a framework component with a client directive Passing Props to Framework Components (https://docs.astro.build/en/guides/framework-components/#passing-props-to-framework-components).

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

@jaunty kettle Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[jaunty kettle]

@magic spire Where can I find more information about using Typescript with Astro?

[magic spire]

Let me check the knowledge base for you again. One moment! :books:

---

Astro provides built-in support for TypeScript, and there are several resources available to learn more about using TypeScript with Astro:

1. The main TypeScript guide in the Astro documentation is an excellent starting point. You can find comprehensive information about TypeScript support, setup, and usage in Astro at TypeScript in Astro (https://docs.astro.build/en/guides/typescript/).

2. For details on how TypeScript is integrated into Astro projects, including importing .ts and .tsx files, and writing TypeScript in Astro components, refer to the TypeScript in Astro (https://docs.astro.build/en/install-and-setup/#typescript-in-astro) section of the installation guide.

3. If you're interested in type checking your Astro projects, the documentation provides information on how to set up and use the astro check command. You can find this information in the Type Checking (https://docs.astro.build/en/guides/typescript/#type-checking) section.

4. For using TypeScript with Astro layouts, there's a specific section in the documentation that explains how to add type safety to your layout components: Using TypeScript with layouts (https://docs.astro.build/en/basics/layouts/#using-typescript-with-layouts).

5. Astro also provides some built-in type utilities that can be helpful when working with TypeScript. You can learn more about these in the Type Utilities (https://docs.astro.build/en/guides/typescript/#type-utilities) section.

6. If you're setting up a new project, the manual setup guide includes information on adding TypeScript support to your Astro project: Manual Setup - Add TypeScript support (https://docs.astro.build/en/install-and-setup/#manual-setup).

These resources should provide you with a comprehensive understanding of how to use TypeScript effectively in your Astro projects.

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