How to fix "This condition will always return 'false' since the types 'GameState-CodePudding

I want to show components depending on the gameStatus value:

import React from "react";
import { useAppSelector } from "./hooks/redux";
import EndScreen from "./pages/EndScreen";
import QuestionsPage from "./pages/QuestionsPage";
import StartingPage from "./pages/StartingPage";

const App = () => {
    const gameStatus = useAppSelector(state => state.game);

    return (
        <>
        {gameStatus === 'start' &&  <StartingPage/>}
        {gameStatus === 'quiz' && <QuestionsPage/>}
        {gameStatus === 'end' && <EndScreen/>}
        </>
    ) 
};

export default App;

gameSlice.ts:


import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface GameState {
    gameStatus: string;
}

const initialState: GameState  = {
    gameStatus: 'start',
}

export const gameSlice = createSlice({
    name: 'game',
    initialState,
    reducers: {
        setGameStatus: (state, action: PayloadAction<string>) => {
            state.gameStatus = action.payload;
        }
    }
});

export const {
    setGameStatus
} = gameSlice.actions;

export default gameSlice.reducer;

but i'm new to ts and can't fix the error "This condition will always return 'false' since the types 'GameState' and 'string' have no overlap". What types should i add to solve the problem?

upd: when i check the type of the "gameStatus" it shows object. I don't understatnd why is it object type?

CodePudding user response：

const gameStatus = useAppSelector(state => state.game.gameStatus);