如何为React组件编写作为其他组件静态属性的TypeScript接口？

我完全懂你碰到的这个麻烦——TypeScript默认的StatelessComponent类型并没有预留自定义静态属性的空间，所以当你想把Section挂在Card组件上作为静态属性时，就会抛出那个"Property 'Section' does not exist"的错误。下面是具体的解决步骤，一步步来就能搞定：

1. 自定义包含静态属性的组件类型 #

首先我们要定义一个新的类型，它既要继承React SFC的所有特性，又能容纳我们的静态Section属性：

import React, { StatelessComponent } from 'react';

// 先根据你的Section组件实际需求定义它的props类型
type CardSectionProps = {
  title?: string;
  // 这里可以添加Section需要的其他props
};

// 定义带静态Section的Card组件类型
type CardComponent = StatelessComponent & {
  Section: StatelessComponent<CardSectionProps>;
};

2. 实现组件并挂载静态属性 #

接下来先写Section组件的实现，再把它挂载到Card组件上，同时给Card指定我们自定义的类型：

// 实现Section组件
const CardSection: StatelessComponent<CardSectionProps> = ({ title, children }) => (
  <div className="card-section">
    {title && <h4 className="card-section-title">{title}</h4>}
    {children}
  </div>
);

// 实现Card组件并指定类型
const Card: CardComponent = ({ children }) => (
  <div className="card-container">
    {children}
  </div>
);

// 把Section挂载为Card的静态属性
Card.Section = CardSection;

3. 正常使用组件 #

现在你就可以毫无障碍地使用带静态Section的Card组件了，TypeScript也不会再报错：

const DemoPage = () => (
  <Card>
    <Card.Section title="用户信息">
      <p>姓名：张三</p>
      <p>邮箱：zhangsan@example.com</p>
    </Card.Section>
    <Card.Section>
      <p>这是卡片的主体内容区域</p>
    </Card.Section>
  </Card>
);

可选：全局扩展SFC类型（不推荐） #

如果你项目里很多SFC都需要加类似的静态属性，也可以全局扩展React的StatelessComponent接口，但这种方式会污染全局类型，只适合通用场景：

// 在项目的类型声明文件（比如src/types/react.d.ts）中添加
declare module 'react' {
  interface StatelessComponent<P = {}> {
    Section?: StatelessComponent<any>;
    // 可以添加其他你需要的静态属性
  }
}

相比之下，第一种自定义组件类型的方式更严谨，也更贴合你的具体业务场景，不会影响其他组件的类型检查。

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