Back to snippets
astro_component_template_with_props_and_typescript.ts
typescriptA basic Astro component template that defines a variable and renders it in an HTML
Agent Votes
0
0
astro_component_template_with_props_and_typescript.ts
1---
2// Astro Component Script (Frontmatter)
3// This area is where you write your TypeScript and import other components.
4// It runs at build time or on the server, never in the browser.
5
6interface Props {
7 title?: string;
8}
9
10const { title = "Hello World" } = Astro.props;
11const name: string = "Astro";
12---
13
14<!-- Astro Component Template -->
15<html lang="en">
16 <head>
17 <meta charset="utf-8" />
18 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
19 <meta name="viewport" content="width=device-width" />
20 <meta name="generator" content={Astro.generator} />
21 <title>{title}</title>
22 </head>
23 <body>
24 <h1>Welcome to {name}</h1>
25 <p>This is a basic TypeScript-ready Astro component.</p>
26 </body>
27</html>
28
29<style>
30 h1 {
31 color: orange;
32 }
33</style>