TypeScript中如何限定变量为指定组件生成的React JSX元素？

默认的ReactElement<TestProps>仅会校验JSX元素的Props结构是否匹配，受TypeScript结构化类型系统的限制，不会校验该元素的生成组件来源，因此无法拦截其他组件生成的元素赋值。要实现严格限定特定组件的返回元素，需要用到ReactElement的第二个泛型参数绑定组件本身的类型，具体实现如下：

步骤1：定义专属元素类型 #

引入React的相关类型后，基于你的TestComponent封装专属的元素类型别名：

import type { ReactElement } from 'react';

interface TestProps { test: string }
const TestComponent = (props: TestProps) => <>{props.test}</>;

interface OtherProps { test2: number }
const OtherComponent = (props: OtherProps) => <>{props.test2}</>;

// 封装专属类型，同时绑定Props和组件本身类型
type TestComponentElement = ReactElement<TestProps, typeof TestComponent>;

步骤2：使用专属类型做变量注解 #

直接用封装好的类型做变量类型注解即可实现校验：

// 合法赋值，无警告
const testElement: TestComponentElement = <TestComponent test="hi"/>;

// 非法赋值，触发类型警告：OtherComponent生成的元素类型与TestComponentElement不匹配
const testElement: TestComponentElement = <OtherComponent test2={6}/>;

实现原理 #

ReactElement的完整类型定义为ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>>，其中第二个泛型T对应该JSX元素的type属性类型：对于组件生成的元素，type就是组件本身的构造函数。我们通过将T指定为typeof TestComponent，就可以强制限定只有TestComponent生成的元素符合类型要求，哪怕其他组件的Props结构和TestProps完全一致，也会因为组件类型不匹配触发报错。

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