我可以将 children 的 props 接口统一为一个 parent 接口吗？

Question

我正在制作游戏。它有一个 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>
  );

以下是其 children 拥有的道具接口：

排行榜（显示有关用户得分的数据）：

interface Props {
  scoresData: string[];
}

统计数据（显示在游戏上花费的时间和取得的位置）：

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

PlayAgain（再次播放的按钮）：

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

在 parent 组件 GameResult 中，我有 GameResultProps 由所有这些接口组成：

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

我的问题是：如何将所有 child 接口统一为 parent (GameResult) 的单个道具接口，同时保持每个 [=] 的接口独立49=]?

我尝试了什么：

从每个 child 导入道具接口到 parent，然后写这样的东西：

type GameResultProps = StatsProps & LeaderboardProps & PlayAgainProps

它可以工作，但是，它似乎完全无法维护。我必须跳转到三个文件才能了解 GameResult 应该接受哪些道具。有没有一种方法可以简化它，以便我可以在 parent (GameResult) 中访问所有 children 道具类型（scoresData、onPlayAgain、时间、地点）？

Answer 1

您可以使用 类型转换:

在您的 GameResult 组件中：

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

在Stats例如：

type PropsStats = Pick<GameResultProps, "time" | "place">;

Typescript 文档：Utility Types

但是为了简单起见，您也可以只创建一个类型文件，在其中定义所有三种类型并将它们组合成一个 GameResultProps。就像您在 post.

中所做的那样

我可以将 children 的 props 接口统一为一个 parent 接口吗？

Can I unify children's props interfaces into a single parent interface?

javascript

reactjs

typescript

react-props

我尝试了什么：