本文详解如何用 TypeScript 正确声明多层级（如 Card.Content.Action.Other）复合组件类型，避免属性缺失错误，通过逐级赋值与接口递归定义实现类型安全的深层嵌套结构。
本文详解如何用 typescript 正确声明多层级（如 `card.content.action.other`）复合组件类型，避免属性缺失错误，通过逐级赋值与接口递归定义实现类型安全的深层嵌套结构。
在 React 与 TypeScript 项目中，复合组件（Compound Components）是一种优雅的模式，用于构建语义清晰、API 友好的 UI 组件库（如
✅ 正确实现原理：分层接口 + 逐级赋值
核心原则是 “每个组件自身声明其子级属性”，而非试图在父组件上一次性定义整个路径。这意味着：
- Card 接口只声明 Content 属性；
- CardContent 接口（即 Card.Content 的类型）再声明 Action 属性；
- CardContentAction 接口再声明 Other 属性；
- 类型赋值必须按层级顺序进行：先定义组件函数，再为其添加静态属性。
以下是可直接复用的完整实现：
import type { ReactNode } from 'react';
interface Props {
children: ReactNode;
}
// 最外层组件 Card
interface CardType {
({ children }: Props): JSX.Element;
Content: CardContentType; // 声明一级子组件
}
// Card.Content 组件（二级）
interface CardContentType {
({ children }: Props): JSX.Element;
Action: CardContentActionType; // 声明二级子组件
}
// Card.Content.Action 组件（三级）
interface CardContentActionType {
({ children }: Props): JSX.Element;
Other: () => JSX.Element; // 声明三级子组件（无 props 的叶节点）
}
// 实际组件实现（纯函数）
const Card: CardType = ({ children }) => <div classname="card">{children}</div>;
const CardContent: CardContentType = ({ children }) => <div classname="card-content">{children}</div>;
const CardContentAction: CardContentActionType = ({ children }) => <div classname="card-action">{children}</div>;
const CardContentActionOther = () => <span classname="card-other"></span>;
// ⚠️ 关键：必须按层级顺序赋值静态属性
Card.Content = CardContent;
CardContent.Action = CardContentAction;
CardContentAction.Other = CardContentActionOther;
// 使用示例（类型安全，IDE 支持自动补全）
export const Screen = () => (
<card><card.content><card.content.action><card.content.action.other></card.content.action.other></card.content.action></card.content></card>
);
? 注意事项与最佳实践
- 禁止反向赋值：不要写 Card.Content.Action = ... —— 因为 Card.Content 此时只是 CardContentType 类型，不包含 Action；必须先让 CardContent 本身拥有 Action 属性，再赋值。
- 叶节点无需 Props 接口：像 Other 这类终端组件若无需 children 或其他 props，可直接用 () => JSX.Element 类型，提升简洁性。
- 扩展性设计：如需支持 N 级嵌套（如 .Level1.Level2.Level3...），只需延续该模式：为每一级组件定义对应接口，并在其实现后挂载下一级静态属性。
- 运行时校验（可选增强）：可在组件内部添加 process.env.NODE_ENV === 'development' 下的运行时检查，确保子组件被正确使用（例如验证 Card.Content 是否存在），进一步提升 DX。
这种模式兼顾了类型安全性、开发体验（自动补全/跳转）与运行时灵活性，是构建专业级 UI 组件库的推荐实践。
