Creating union types

Explore how to create and use union types in TypeScript to combine different types such as numbers, null, undefined, string literals, and objects. Understand how union types can represent multiple possible values, making your React app's types stronger and more precise.

We'll cover the following...

- Understanding a union type
- String literal union types
- Object union types
- Wrap up

Understanding a union type #

As the name suggests, union types are types that we can combine together to form a new type. A union type is constructed from existing types using the pipe (|) character:

type A_or_B_or_C = A | B | C;

Let’s go through an example to make this clear. Let’s say we have an age variable that can be null or numeric. How could we ...

1.Why TypeScript?

2.Using basic types

3.Creating types

4.Working with generic types

5.Creating strongly-typed function component props

6.Creating strongly-typed function component state

7.Creating strongly-typed class components

8.Creating strongly-typed component events and event handlers

9.Creating strongly-typed context

10.Creating strongly-typed refs

11.Creating React projects with TypeScript using Create React App

12.Creating a React and TypeScript project manually

13.Putting everything together

Creating union types

Understanding a union type #