Learn React with TypeScript 3

Discriminated union pattern

The discriminated union pattern allows us to handle the logic for different union types.

Let's go through an example:

1. Let's first create three interfaces to represent a textbox, a date picker, and a number slider:

interface ITextbox {  control: "Textbox";  value: string;  multiline: boolean;}interface IDatePicker {  control: "DatePicker";  value: Date;}interface INumberSlider {  control: "NumberSlider";  value: number;}

They all have a property called control, which will be the discriminant in the pattern.

2. Let's move on to combine these interfaces into a union type called Field:

type Field = ITextbox | IDatePicker | INumberSlider;

So, we can create union types from any types, and not just string literals. In this ...