• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Practicing React with Typescript

kimokimo

Kimo
Joined
Jan 25, 2011
Messages
821
Solutions
6
Reaction score
154
GitHub
karimadnan
So Typescript been out for a while and I'm late to the party, but better than never, I've played with it for the past day.
I've made this simple trivia game just to practice: GitHub - karimadnan/trivia (https://github.com/karimadnan/trivia).

If you have any suggestions what I could've done better or how to improve my Typescript / React code.

ps: I didn't put much time into the UI, It's not responsive and might be broken with some questions, also game ending is not handled.
 

Alush

Don't Forget
Joined
May 24, 2009
Messages
189
Reaction score
85
are you going in the right way dude, looks very good

The RightPanel can you use the types to make an mapping object and make it cleaner, I not sure it works exactly but something like that can you do
JavaScript:
export enum GState {
  WAITING = 'waiting',
  LOADING = 'loading',
  STARTED = 'started'
};
type StatesTypes = GState.LOADING | GState.STARTED | GState.WAITING;
type StateMapping = {
    [key in StatesTypes]:(any) => JSX.Element;
}

const GameState: StateMapping = {
    loading: ComponentLoading,
  waiting: ComponentWaiting,
  started: ComponentStarted,
}

const RightPanel: React.FC<Props> = ({ gameState, ...restProps}) => {
    const GameComponent = GameState[gameState];
    return (
        <div className='game-panel-right'>
            <GameComponent {...restProps} />
        </div>
    )
}
 
Top