使用 Typescript 输入 Redux Store

Question

Here are the action creators types:

    export type Calculation = {
      type: string;
    };
    
    export type AddAndSubtract = {
      type: string;
      value: number;
    };
    
    export type GetUserInput = {
      type: string;
      value: HTMLTextAreaElement;
    };

export type DispatchActions = Calculation | GetUserInput | AddAndSubtract;

And this is the store:

export const rootReducer = (state = initialState, action: DispatchActions) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    case "ADD_5":
      return { ...state, count: state.count + action.value };
    case "SUBTRACT_5":
      return { ...state, count: state.count - action.value };
    case "RESET":
      return { ...state, count: action.value };
    case "GET_USER_INPUT":
      return { ...state, userInput: action.value };
    case "MULTIPLY":
      return {
        ...state,
        count: state.count * state.userInput,
      };
    default:
      return state;
  }
};

However typescript show error: Property 'value' does not exist on type 'DispatchActions'. Property 'value' does not exist on type 'Calculation'. How may I solve this ?

Answer 1

No need to use union type here. You just need to create the single type DispatchAction:

export type DispatchAction = {
      type: string;
      value: number | HTMLTextAreaElement;
}

export const rootReducer = (state = initialState, action: Partial<DispatchAction>) =>

OR

export type DispatchAction = {
      type: string;
      value?: number | HTMLTextAreaElement;
}

export const rootReducer = (state = initialState, action: DispatchAction) => ...

Answer 2

In Addition of above comment. This will also work!

Add value key in Calculation, you are using union type's.

export type Calculation = {
      type: string;
      value: number
    };

Read https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html for more help and reason of error!

Answer 3

As others are indicating, the problem is coming from how you are using the union. As you've written it, Typescript doesn't have any way of knowing which of the possible types in the union you are passing and so it has to assume it could be any of them. For example, it would be perfectly valid with your typing to pass an action like this:

const badAction:Calculation = {
  type: “SUBTRACT_5”
}

Which wouldn't work with your code at runtime—and that's exactly what TS is telling you. You could handle by having a weak type like the answers above are suggesting. Or you could use string literals to provide stronger typing with unions as explained in the Redux docs.