如何在TypeScript中为锚点与段落元素数组定义类型

问题根源分析 #

你之前的两种类型定义都没命中正确的React元素类型：

1. 使用AnchorHTMLAttributes<HTMLAnchorElement>：这是HTML元素的属性对象类型，不是JSX元素本身的类型。因为很多HTML属性是通用的（比如className、style），所以<p>标签的属性也能匹配这个类型，导致类型检查失效。
2. 使用HTMLAnchorElement：这是浏览器中真实的DOM节点类型，而JSX标签（比如<a>）返回的是React.ReactElement类型的虚拟DOM对象，两者类型不兼容，所以即使传入合法的<a>标签也会报错。

正确的类型定义方案 #

要限定data为<a>或<p>的JSX元素数组，需要使用React.ReactElement类型，并通过泛型参数指定允许的DOM元素类型：

import React from 'react';

// 定义允许的元素类型：<a>或<p>对应的React元素
type AllowedDataElement = React.ReactElement<HTMLAnchorElement> | React.ReactElement<HTMLParagraphElement>;

interface Props {
  data: AllowedDataElement[];
}

完整代码示例 #

Data组件（Data.tsx）

import React from 'react';

type AllowedDataElement = React.ReactElement<HTMLAnchorElement> | React.ReactElement<HTMLParagraphElement>;

interface Props {
  data: AllowedDataElement[];
}

export const Data = ({ data }: Props) => {
  return <div>{data}</div>;
};

父组件使用（App.tsx）

import "./styles.css";
import { Data } from "./Data";

export default function App() {
  return (
    <Data 
      data={[
        <a href="/">hello world</a>,
        <p>this is a valid paragraph</p>
        {/* 下面这行会触发类型错误，因为<div>不在允许范围内 */}
        {/* <div>invalid element</div> */}
      ]} 
    />
  );
}

效果验证 #

• 传入<a>或<p>标签时，类型检查通过，无报错。
• 传入其他标签（比如<div>、<span>）时，TypeScript会立即抛出类型错误，符合预期。

内容的提问来源于stack exchange，提问作者Giesburts