Javascript 我可以将子元素的props 接口统一成一个父接口吗

我在做一个游戏.它有一个GameResult组件:

export default function GameResult({
  scoresData,
  onPlayAgain,
  time,
  place,
}: GameResultProps) {
  return (
    <div className="c-game-result">
      <Leaderboard scoresData={scoresData} />
      <Stats time={time} place={place} />
      <PlayAgain onClick={onPlayAgain} />
    </div>
  );

以下是其子系统的props 界面:

• 排行榜(显示有关用户分数的数据):

interface Props {
  scoresData: string[];
}

• 统计数据(显示游戏花费的时间和发生的地点):

interface Props {
  time: string;
  place: string;
}

• 再次播放(再次播放的按钮):

interface Props {
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

在父组件GameResult中，我有GameResultProps个由以下所有接口组成:

interface GameResultProps {
  scoresData: string[];
  onPlayAgain: React.MouseEventHandler<HTMLButtonElement>;
  time: string;
  place: string;
}

我的问题是:How can I unify all child interfaces into a single props interface for a parent (GameResult), while keeping the interfaces separate for each child?

What I tried:

• 将props 界面从每个子元素导入到家长，然后编写如下内容:

type GameResultProps = StatsProps & LeaderboardProps & PlayAgainProps

但它是有效的，似乎完全无法维护.为了理解游戏结果应该接受哪些props ，我必须跳转到三个文件.有没有办法简化它，这样我就可以访问父级(GameResult)中的所有子级props 类型(scoresData、OnPlay、time、place)？