Estoy construyendo un juego. Tiene un componente 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> );

Aquí están las interfaces para accesorios que tienen sus hijos:

• Tabla de clasificación (muestra los datos sobre las puntuaciones de los usuarios):

 interface Props { scoresData: string[]; }

• Estadísticas (muestra el tiempo dedicado al juego y el lugar ocupado):

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

• PlayAgain (un botón para volver a jugar):

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

En el componente principal, GameResult, tengo GameResultProps que consta de todas estas interfaces:

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

Mi pregunta es: ¿Cómo puedo unificar todas las interfaces secundarias en una sola interfaz de accesorios para un padre (GameResult), manteniendo las interfaces separadas para cada hijo?

Lo que probé:

• Importando la interfaz de accesorios de cada niño a padre, luego escribiendo algo como esto:

 type GameResultProps = StatsProps & LeaderboardProps & PlayAgainProps

Funciona, sin embargo, parece completamente imposible de mantener. Tengo que saltar a tres archivos para entender qué accesorios debe aceptar GameResult. ¿Hay alguna manera de simplificarlo para que pueda acceder a todos los tipos de accesorios secundarios (scoresData, onPlayAgain, time, place) directamente en el padre (GameResult)?