Very nice article!
Codie Simmons
1

Hey Codie Simmons thanks man, glad you enjoyed it!

So in Typed functional languages, when you switch on a union type, it’s called a discriminated union. TypeScript does support these! It’s been my experience that you get a varying level of compiler help with these depending on the language / type system. Checkout this article about discriminated unions in TS and also look into the part about exhaustive checks. With the exhaustive check enabled, TS will ensure that you are A. handling every case in a Union Type and B. that the data you access within each case applies to that specific type.

For the purposes of demonstrating that last point, I’ve pasted in a code example.

export interface InputAction extends Action {
  type: T.INPUT_TYPE;
  input: Input;
}
export interface LoadDataAction extends Action {
  type: T.LOAD_DATA_TYPE;
  data: Data;
}
export type ActionUnion = InputAction | LoadDataAction; // this is our union type
const reducer: Reducer<State> = (state: State = initialState, action: ActionUnion) => {
  switch (action.type) {
  case T.INPUT:
    return {
      ...state,
      input: action.input,
    };
  case T.LOAD_DATA:
    return {
      ...state,
      data: action.data, // Ts can tell that action has a data property in this case.
input: action.input, // TS can tell that action does not have an input property in this case
    };
  default:
const _exhaustiveCheck: never = s; // ts will now ensure that you have handled all cases in the union
    return state;
  }
};
Show your support

Clapping shows how much you appreciated Ryan C. Collins’s story.