接受 TypeScript Astro 组件中的常规 HTML 元素属性

Question

我正在使用 Astro 和 TypeScript 创建一个可重用的 UI 组件。该组件只是<a>HTML 标记的包装器。问题是我必须自己定义Props带有元素的所有常规 HTML 属性的接口<a>（href、target、title等）

有没有办法通过扩展某个接口来避免 Astro 中的这种情况？

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

const props = Astro.props;
---

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

作为参考，这是在 React 中使用以下类型完成的 React.HTMLAttributes<HTMLAnchorElement>

Answer 1

您可以使用 Astro 的内置 HTML 属性类型来扩展组件的 prop 接口

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

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

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

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