ReactElement类型使用疑惑：指定空对象泛型为何未报错？

先理清楚你混淆的核心点，再解释原因：

1. ReactElement的泛型P管的是什么 #

ReactElement<P, T>里的P，是你返回的那个React元素自身的props类型，不是组件接收的入参props。你的Heading组件接收HeadingProps，但返回的是<h1>标签，这个<h1>对应的ReactElement的props是React.HTMLAttributes<HTMLHeadingElement>（包含children、className这类h1支持的属性），和组件的入参text没关系。

2. 为啥指定空对象{}不报错？ #

TypeScript里，{}是所有对象类型的顶层父类型，任何带属性的对象都能赋值给{}。你返回的<h1>的props对象是HTMLAttributes类型，属于{}的子类型，所以TypeScript认为这个赋值合法，不会触发报错。

3. 正确的用法姿势 #

• 函数组件根本不需要手动指定返回类型为ReactElement，React的类型定义已经帮你默认好了——不管是用React.FC还是直接写函数，返回类型都会自动推导为ReactElement | null，省心又准确。
• 要是你非得手动指定，得匹配返回元素的props类型，比如：

import React, { ReactElement, HTMLAttributes } from 'react';

type HeadingProps = {
    text : string,
}

const Heading = (props: HeadingProps): ReactElement<HTMLAttributes<HTMLHeadingElement>> => {
    return <h1>{props.text}</h1>
}

当然，更推荐让TypeScript自动推导，代码更简洁：

import React from 'react';

type HeadingProps = {
    text : string,
}

const Heading = (props: HeadingProps) => {
    return <h1>{props.text}</h1>
}

4. 怎么触发你预期的报错？ #

如果想让返回的元素props严格符合某个类型，得约束JSX元素的props。比如自定义一个只能用空props的组件：

type EmptyProps = {};
const EmptyBox = (props: EmptyProps) => <div />;

// 这里写<EmptyBox text="hi" />就会报错，因为text不在EmptyProps里

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