2

Using Astro with TypeScript, I'm creating a reusable UI component. The component is just a wrapper for the <a> HTML tag. The problem is I would have to define the interface Props with all the general HTML properties for <a> element by myself (href, target, title, etc.)

Is there a way to avoid this in Astro by extending a certain interface?

---
export interface Props {} // I don't want to define `href`, `target`, etc. by myself here

const props = Astro.props;
---

<a {...props}>
  <slot />
</a>

For reference, this is done in React using types such as React.HTMLAttributes<HTMLAnchorElement>

Sang
  • 490
  • 2
  • 5
  • 14

1 Answers1

5

You can extend your component's prop interface using Astro's Built-in HTML attributes type

---
import type { HTMLAttributes } from 'astro/types';

export interface Props extends HTMLAttributes<'a'> {
  // ...
}

const { 
  ...attrs
} = Astro.props
---

<a {...attrs}>
  <slot />
</a>
Bryce Russell
  • 647
  • 3
  • 8