如何在散布道具的Typescript上声明类型

// 定义一个接口来描述道具的形状
interface MyProps {
  name: string;
  age?: number; // 可选属性
  [key: string]: any; // 允许其他任意属性
}

// 使用这个接口作为组件的道具类型
const MyComponent: React.FC<MyProps> = ({ name, age, ...rest }) => {
  return (
    <div>
      <p>Name: {name}</p>
      {age !== undefined && <p>Age: {age}</p>}
      {/* 使用散布道具传递剩余的属性 */}
      <OtherComponent {...rest} />
    </div>
  );
};

// 另一个组件，它可能会接收来自MyComponent的散布道具
const OtherComponent: React.FC<any> = (props) => {
  // ...
};

const props: MyProps = {
  name: 'John',
  age: 30,
  extraProp: 'some value'
};

// 显式指定散布道具的类型
<OtherComponent {...(props as MyProps)} />