1
00:00:00,360 --> 00:00:04,620
In this lecture, we're going to learn about a feature called Union Types.

2
00:00:04,920 --> 00:00:07,980
They give us more flexibility with annotating data.

3
00:00:08,250 --> 00:00:14,640
We've seen how TypeScript can restrict the type of a variable, either by explicitly setting the type

4
00:00:14,640 --> 00:00:16,890
or letting JavaScript infer the type.

5
00:00:17,220 --> 00:00:23,580
Up until now, we've been stuck with a single type one if we want to allow multiple types.

6
00:00:23,820 --> 00:00:27,850
For example, we may want to retrieve the name from an API.

7
00:00:28,200 --> 00:00:35,700
The initial value for the name may be null until the API request is complete after receiving a response.

8
00:00:35,850 --> 00:00:39,730
We'll update the variable to a string in this scenario.

9
00:00:39,750 --> 00:00:44,880
We would get an error because TypeScript will not allow the data type to change.

10
00:00:45,570 --> 00:00:48,420
One solution would be to add the any type.

11
00:00:48,720 --> 00:00:52,200
The any type is a custom type by TypeScript.

12
00:00:52,500 --> 00:00:55,290
You can think of it as a get out of jail free card.

13
00:00:55,590 --> 00:00:59,340
We aren't restricted to a specific data type with this type.

14
00:00:59,700 --> 00:01:04,500
Unfortunately, we miss out on the benefits TypeScript brings to the table.

15
00:01:04,890 --> 00:01:07,740
There wouldn't be a point in using TypeScript.

16
00:01:08,040 --> 00:01:10,980
That doesn't mean you should never use the any type.

17
00:01:11,280 --> 00:01:14,130
It should be considered as a last resort option.

18
00:01:14,850 --> 00:01:18,690
That leads us to the question What alternative solution is there?

19
00:01:18,900 --> 00:01:20,670
We can add union types.

20
00:01:20,910 --> 00:01:28,230
A union type is when multiple data types are given to a variable, excluding the any type on our variable.

21
00:01:28,350 --> 00:01:34,140
Instead of letting TypeScript infer the type, we can add the string data type back in.

22
00:01:36,770 --> 00:01:43,070
We can add more data types by separating them with a pipe character after the pipe character.

23
00:01:43,100 --> 00:01:45,170
We will add the no data type.

24
00:01:47,770 --> 00:01:52,330
We can add as many data types as we'd like after adding the data type.

25
00:01:52,450 --> 00:01:55,330
Let's try changing the variable to no.

26
00:01:57,880 --> 00:02:03,970
As expected, TypeScript doesn't throw an error if we want to use multiple data types.

27
00:02:04,090 --> 00:02:09,580
We must add the types to the variable TypeScript will not infer union types.

28
00:02:09,820 --> 00:02:11,560
It's up to us to add them in.

29
00:02:11,890 --> 00:02:15,370
Otherwise, we may be restricted to one data type.

30
00:02:16,120 --> 00:02:20,200
One advantage of union types is being able to use them anywhere.

31
00:02:20,440 --> 00:02:25,060
We can add them to functions, return values, arrays and objects.

32
00:02:25,330 --> 00:02:28,570
We're not limited to adding union types to variables.

33
00:02:28,900 --> 00:02:33,070
For example, let's switch over to the example Dot's file.

34
00:02:33,670 --> 00:02:36,100
It's possible the shipping function may fail.

35
00:02:36,430 --> 00:02:41,560
We may want to return a Boolean value for the developer to handle the error if it does.

36
00:02:41,890 --> 00:02:47,890
As of now, we're limited to returning numbers if we want to return numbers and Boolean.

37
00:02:48,070 --> 00:02:49,780
We'll need to add a union type.

38
00:02:50,170 --> 00:02:55,240
We'll update the function by adding the pipe character after the no return type.

39
00:02:55,570 --> 00:02:59,200
Next, we'll add the Boolean type to the list of types.

40
00:03:01,750 --> 00:03:08,230
Just like that, we'll be able to return either a number or Boolean from the function union types are

41
00:03:08,230 --> 00:03:11,020
powerful because of the flexibility they provide.

42
00:03:11,350 --> 00:03:13,390
Let's continue in the next lecture.