如何为ReactElement类型创建正确的TypeScript类型守卫？

你当前定义的isSpecialTeaser类型守卫逻辑错误，因为<MyComponent />这类JSX元素对应的ReactElement本质是对象类型，而非函数类型。函数组件本身是函数，但渲染后的JSX元素是React创建的对象实例。

正确的实现方式有两种： #

1. 使用React内置的类型判断工具

React自带isValidElement方法，可以直接用来判断是否为ReactElement，结合类型守卫断言即可：

import { isValidElement, ReactElement } from 'react';

export type SpecialTeaserType = ReactElement;

const isSpecialTeaser = (teaser: unknown): teaser is SpecialTeaserType => {
  return isValidElement(teaser);
};

2. 手动实现判断逻辑

如果你不想依赖React的内置方法，可以手动检查ReactElement的特征——它是对象，且包含$$typeof属性（这是React用来标记合法元素的内部标识）：

import { ReactElement } from 'react';

export type SpecialTeaserType = ReactElement;

const isSpecialTeaser = (teaser: unknown): teaser is SpecialTeaserType => {
  return (
    typeof teaser === 'object' &&
    teaser !== null &&
    typeof (teaser as { $$typeof?: symbol }).$$typeof === 'symbol'
  );
};

补充说明 #

• 不要混淆函数组件和JSX元素：MyComponent是函数类型，但<MyComponent />是调用该组件后返回的ReactElement对象，两者类型完全不同。
• 类型守卫的参数建议用unknown代替Teaser，这样可以更安全地处理任意类型的输入。

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