Typescript Discriminated Union allows invalid state

by

This is an issue with the way excess property checks work on unions. If an object literal is assigned to a variable of union type, a property will not be marked as excess if it is present on any of the union members. If we don’t consider excess properties to be an error (and except for object literals they are not considered an error), the object literal you specified could be an instance of LoadingState (an instance with isLoading set to true as mandated and a couple of excess properties).

To get around this undesired behavior we can add properties to LoadingState to make your object literal incompatible with LoadingState

type LoadingState = { isLoading: true; isSuccess?: undefined }
type SuccessState = { isLoading: false; isSuccess: true; }
type ErrorState =   { isLoading: false; isSuccess: false; errorMessage: string; }

type State = LoadingState | SuccessState | ErrorState;

const testState: State = { // error
    isLoading: true,
    isSuccess: true,
    errorMessage: "Error!"
}

We could even create a type that would ensure such member will be added

type LoadingState = { isLoading: true; }
type SuccessState = { isLoading: false; isSuccess: true; }
type ErrorState =   { isLoading: false; isSuccess: false; errorMessage: string; }

type UnionKeys<T> = T extends T ? keyof T : never;
type StrictUnionHelper<T, TAll> = T extends any ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, undefined>> : never;
type StrictUnion<T> = StrictUnionHelper<T, T>

type State = StrictUnion< LoadingState | SuccessState | ErrorState>

const testState: State = { // error
    isLoading: true,
    isSuccess: true,
    errorMessage: "Error!"
}

More Related Contents:

  1. Can’t narrow the type of an object property even after checking it with a type guard
  2. Narrowing a return type from a generic, discriminated union in TypeScript
  3. Transform union type to intersection type
  4. Type union not checking for excess properties
  5. Does Typescript support mutually exclusive types?
  6. ‘any’ vs ‘Object’
  7. How to implement a typescript decorator?
  8. Create a global variable in TypeScript
  9. Get an object’s class name at runtime
  10. What is the syntax for Typescript arrow functions with generics?
  11. How to extend String Prototype and use it next, in Typescript?
  12. Types in object destructuring
  13. Angular 2: Convert Observable to Promise
  14. How to prepare release version with SystemJS and Gulp?
  15. Angular2 canActivate() calling async function
  16. Purpose of declare keyword in TypeScript
  17. How to declare a Fixed length Array in TypeScript
  18. Higher-order type functions in TypeScript?
  19. Angular 6 View is not updated after changing a variable within subscribe
  20. Keyof inferring string | number when key is only a string
  21. How to install Typescript typings for google maps
  22. Function property vs method
  23. How to declare a type as nullable in TypeScript?
  24. Why does TypeScript track mutation of function static properties?
  25. Array VS Type[] in Typescript
  26. TypeScript filter out nulls from an array
  27. typescript: validate excess keys on value, returned from function
  28. What’s the meaning of “=>” in TypeScript? (Fat Arrow)
  29. Typescript: Omit a property from all interfaces in a union, but keep the union structure
  30. Declaring abstract method in TypeScript

Leave a Comment