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

Question

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

有没有办法通过扩展某个接口(interface)来避免 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 的 Built-in HTML attributes 扩展组件的 prop 接口(interface)类型

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

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

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

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