在 TypeScript Astro 组件中接受通用 HTML 元素属性答案

【问题标题】：Accept general HTML element props in TypeScript Astro component在 TypeScript Astro 组件中接受通用 HTML 元素属性
【发布时间】：2023-02-08 13:02:35
【问题描述】：

将 Astro 与 TypeScript 结合使用，我正在创建一个可重用的 UI 组件。该组件只是 <a> HTML 标记的包装器。问题是我必须自己定义接口 Props 和 <a> 元素的所有通用 HTML 属性（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> 等类型完成的

【问题讨论】：

标签： javascript typescript astrojs astro

【解决方案1】：

Built-in HTML attributes

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

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

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

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

【讨论】：