为判断React类组件的TypeScript函数指定合适参数类型

1. 参数类型的正确选择 #

题目要求参数可以是任意JS值或对象，因此最适合的参数类型是unknown——它是TypeScript中所有类型的顶层类型，能接受任何值，完美符合“不限于React ComponentType”的要求。

2. 解决component.prototype的any类型问题 #

为了避免ESLint的“Unsafe member access”报错，我们可以通过类型断言给component.prototype指定一个明确的类型，而不是让TypeScript推断为any。

最终实现代码 #

// 定义类组件原型的类型
interface ClassComponentProto {
  isReactComponent?: unknown;
}

export const isClassComponent = (component: unknown): boolean => {
  // 先收窄类型：判断是否为函数
  if (typeof component !== 'function') {
    return false;
  }
  // 断言函数的prototype符合我们定义的类型
  const componentWithProto = component as { prototype: ClassComponentProto };
  return Boolean(componentWithProto.prototype.isReactComponent);
};

或者更简洁的内联断言写法：

export const isClassComponent = (component: unknown): boolean => {
  return (
    typeof component === 'function' &&
    Boolean(
      (component as { prototype?: { isReactComponent?: unknown } }).prototype?.isReactComponent
    )
  );
};

为什么你之前的写法不合理 #

你自定义的ComponentType<P, R>只限定了参数是函数类型，但题目明确要求参数可以是任意JS值（比如字符串、对象、null等），用泛型函数限定为函数类型会导致无法传入非函数值，不符合需求。

可选：添加精确的类型守卫 #

如果需要让TypeScript在判断后自动识别类组件类型，可以结合React官方类型，返回类型设为类型守卫：

import type { ComponentClass } from 'react';

export const isClassComponent = (component: unknown): component is ComponentClass => {
  return (
    typeof component === 'function' &&
    Boolean(
      (component as { prototype?: { isReactComponent?: unknown } }).prototype?.isReactComponent
    )
  );
};

这样当你用这个函数做类型判断后，TypeScript会自动把变量类型收窄为ComponentClass。

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