如何用TypeScript为Astro组件类型的Prop定义类型？

Astro自带专门的组件类型体系，完全不需要依赖React的FunctionComponent，你可以直接使用内置的AstroComponent类型来定义动态传递的组件Prop：

1. 从astro模块导入组件类型
2. 在Props接口中替换any为AstroComponent；如果你的Icon组件需要接收特定props，还可以用泛型指定其props类型

修改后的完整代码示例：

---
import type { AstroComponent } from 'astro';

interface Props {
  // 基础组件类型，适用于无props或接受任意props的Astro组件
  Icon: AstroComponent;
  // 若需限制Icon组件的props，可使用泛型精准定义：
  // Icon: AstroComponent<{ size?: string; color?: string }>;
  title: string;
  descriptionItems: string[];
}

const { Icon, title, descriptionItems } = Astro.props;
---

<div class="flex flex-col items-center text-center p-2 bg-transparent rounded-lg md:flex-row md:gap-x-5 md:text-left">
  <div class="mb-4">
    <Icon />
  </div>
  <div>
    <h3 class="text-2xl font-bold mb-2 uppercase">{title}</h3>
    <ul class="ul-style-type-custom text-left">
        {descriptionItems.map(item => (
            <li class="pl-2">{item}</li>
        ))}
    </ul>
  </div>
</div>
<style>
    .ul-style-type-custom {
        list-style-type: "-";
    }
</style>

补充说明 #

• AstroComponent是Astro内置类型，专门用于描述Astro组件，无需额外安装依赖
• 泛型写法AstroComponent<PropsType>可以精准限制组件能接受的props，提升类型安全性
• 该方式适配所有Astro支持的组件类型，包括纯Astro组件、静态组件以及Vue/Svelte等跨框架组件

内容的提问来源于stack exchange，提问作者Lucas David Ferrero