实现React复合组件时，如何定义对应的TypeScript类型？

要实现React组件的复合设计模式，给主组件添加静态子组件，你之前的类型定义存在两个核心问题：

• 错误地将Toggle的类型定义为ReactNode，它本质是一个React组件，应使用React.FC<void>或更通用的React.ComponentType类型
• 组件声明语法有误（function FlyOut=...不符合TypeScript语法规范）

下面是两种可行的解决方案：

方案一：先定义组件，再用类型断言扩展 #

适合先完成组件逻辑编写，再补全静态属性类型的场景：

import React, { ReactNode, FC } from 'react';

// 主组件Props类型
type FlyoutProps = {
  children?: ReactNode;
};

// 定义主组件
const FlyOut: FC<FlyoutProps> = (props) => {
  return <div>{props.children}</div>;
};

// 定义子组件
const Toggle: FC<void> = () => {
  return <div><Icon /></div>;
};

// 扩展主组件类型，声明静态属性的类型
type FlyOutWithToggle = FC<FlyoutProps> & {
  Toggle: FC<void>;
};

// 通过类型断言为组件添加静态属性
(FlyOut as FlyOutWithToggle).Toggle = Toggle;

// 导出带静态属性的主组件
export default FlyOut as FlyOutWithToggle;

方案二：先定义完整类型，再声明组件 #

先明确主组件的完整类型结构，再实现组件逻辑：

import React, { ReactNode, FC } from 'react';

// 主组件Props类型
type FlyoutProps = {
  children?: ReactNode;
};

// 定义主组件的完整类型：包含基础FC类型和静态Toggle组件
type FlyOutComponent = FC<FlyoutProps> & {
  Toggle: FC<void>;
};

// 实现主组件
const FlyOut: FlyOutComponent = (props) => {
  return <div>{props.children}</div>;
};

// 实现并挂载静态Toggle组件
FlyOut.Toggle = () => {
  return <div><Icon /></div>;
};

export default FlyOut;

关键说明 #

• 静态属性的类型必须匹配组件本身的类型：比如Toggle是FC<void>，不能写成ReactNode（ReactNode是组件渲染后的结果，而非组件本身）
• 如果子组件有自定义Props，只需将FC<void>替换为对应的Props类型即可，例如FC<ToggleProps>
• 确保导出的组件类型包含静态属性定义，这样TypeScript才能在使用时正确提示FlyOut.Toggle的存在

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