TypeScript中是否有对应React PropTypes.instanceOf()的实现？如何在TypeScript中声明属性为特定React组件（如Message）的实例？

当然可以实现！不过得先理清一个关键点：函数式组件本身并不是类，所以没法像类组件那样直接用instanceof来检查实例。但如果你的需求是约束属性必须是Message组件渲染出来的React元素（也就是<Message />这样的结果），TypeScript的类型系统完全能搞定这件事，而且是更严谨的编译时检查。

具体实现代码 #

import React from "react";

// 定义Message函数式组件
const Message = () => {
  return <p>My Message</p>;
};

// 定义MyComponent的Props类型
type Props = {
  // 约束optionalMessage必须是Message组件生成的React元素
  optionalMessage: React.ReactElement<typeof Message>;
};

// 定义MyComponent组件
const MyComponent = ({ optionalMessage }: Props) => {
  return <div>{optionalMessage}</div>;
};

// 正确的使用示例
const App = () => {
  return <MyComponent optionalMessage={<Message />} />;
};

// 错误示例：传递非Message组件的元素会触发TypeScript编译报错
// const BadApp = () => {
//   return <MyComponent optionalMessage={<p>Wrong component</p>} />;
// };

补充场景说明 #

如果你的需求是传递组件本身（而不是组件渲染后的元素），可以直接用typeof Message来定义属性类型，比如：

type Props = {
  // 约束属性必须是Message组件本身
  MessageComponent: typeof Message;
};

// 使用时可以直接渲染传入的组件
const MyComponent = ({ MessageComponent }: Props) => {
  return <MessageComponent />;
};

对比你之前用的PropTypes.instanceOf(Message)：在函数式组件场景下，PropTypes的这个写法其实是用来约束传递的是该组件的React元素，而TypeScript的React.ReactElement<typeof Message>正好对应这个场景，而且是编译阶段就会检查错误，比PropTypes的运行时检查更高效、更严谨。

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