javascript - Acceptera allmänna HTML-elementegenskaper i TypeScript Astro-komponent

Med Astro och TypeScript skapar jag en återanvändbar UI-komponent. Komponenten är bara ett omslag för HTML-taggen <a>. Problemet är att jag skulle behöva definiera gränssnittet Props med alla allmänna HTML-egenskaper för <a>-elementet själv (href, target, title osv.)

Finns det ett sätt att undvika detta i Astro genom att utöka ett visst gränssnitt?

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

const props = Astro.props;
---

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

Som referens görs detta i React med typer som React.HTMLAttributes<HTMLAnchorElement>

Svar #1

Du kan utöka din komponents prop-interface med Astros inbyggda HTML-attributtyp

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

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

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

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

Relaterade artiklar