This seems odd in that if you do not explicitly return something from an arrow function. I believe that is construed as a "never". So, to me, this seems like the problem. If I am wrong, sorry about that.

const Dispatch = createContext({
  dispatch: (action: ActionInterface) => {


The issue is related to the way you constructed your ActionInterface type and used it in the reducer.

What you need is to have a way for TypeScript to differentiate the action structure when you pass it to the switch statement.

The best way to solve this is by simply give a hint to TypeScript about your actions and the union type you have.

Look at this example in TypeScript playground


it is a best practice to define types for action creators separately.

Instead of

interface ActionInterface {
   type: string;
   value: string | boolean;

use two interface and define the type based on that

interface IActionInterface {
    type: string;

interface IMessageActionInterface extends IActionInterface { 
    value: string;

interface IShowActionInterface extends IActionInterface {
   value: boolean;

type ActionTypes = IMessageActionInterface | IShowActionInterface;

In Reducer

const Reducer = (state: StateInterface, action: ActionTypes) => { }


Typescript is not able to determine a safe typecast from IActionInterface value: string | boolean to StateInterface warningShow: boolean, in this code - warningShow: action.value. It cannot safely presume that value will only contain a boolean.

There are several ways to suppress this, a simple one is -

warningShow: action.value as boolean

warningMessage: action.value as string

The as keyword will assert that the type of value is a boolean or string.

Related Query

More Query from same tag