1
00:00:00,330 --> 00:00:04,890
In this lecture, we're going to learn how to annotate arrays and objects.

2
00:00:05,190 --> 00:00:09,360
Up until now, we've been focused on primitive types and functions.

3
00:00:09,660 --> 00:00:13,260
It's time to shift our focus to more complex types.

4
00:00:13,620 --> 00:00:20,250
The syntax for annotating arrays and objects is similar to annotating anything else in TypeScript.

5
00:00:20,790 --> 00:00:24,240
In our file, let's add a section for this demonstration.

6
00:00:26,750 --> 00:00:31,220
We will create an array called items with some string values.

7
00:00:33,740 --> 00:00:40,220
If we define an array with some values, TypeScript will infer the type of our array, according to

8
00:00:40,220 --> 00:00:44,510
our editor, TypeScript is inferring the array will store strings.

9
00:00:44,840 --> 00:00:45,530
That's great.

10
00:00:45,800 --> 00:00:48,650
But what if we want it to initialize an empty array?

11
00:00:48,980 --> 00:00:55,760
If our array were empty, type inference wouldn't work by removing the items in the array, the type

12
00:00:55,760 --> 00:00:58,010
of the array has been set to any.

13
00:01:00,730 --> 00:01:08,140
In that case, we can explicitly annotate the array like we would any other variable after the name

14
00:01:08,140 --> 00:01:13,510
of the variable will add a colon, followed by the type of values the array will store.

15
00:01:13,900 --> 00:01:16,420
Finally, we'll set the type two string.

16
00:01:19,160 --> 00:01:20,540
Despite setting the type.

17
00:01:20,690 --> 00:01:24,650
We'll get an error, the error will tell us the value is invalid.

18
00:01:25,010 --> 00:01:27,980
The problem is how we've annotated the variable.

19
00:01:28,290 --> 00:01:32,210
There's one extra bit of code we need to add after the type.

20
00:01:32,450 --> 00:01:36,470
We'll add a pair of square brackets by adding the square brackets.

21
00:01:36,620 --> 00:01:40,370
TypeScript will assume the array will be filled with strings.

22
00:01:40,940 --> 00:01:47,270
We can take this a step further by adding union types if we need to store an array of different types

23
00:01:47,270 --> 00:01:48,140
of values.

24
00:01:48,290 --> 00:01:49,730
We can add a union type.

25
00:01:50,150 --> 00:01:54,170
We will add on to the annotation by including the number type.

26
00:01:56,890 --> 00:02:02,440
There's one important note I want to add these square brackets are being added to both types.

27
00:02:02,800 --> 00:02:08,620
If we didn't include the square brackets to the number of type, TypeScript would not allow us to store

28
00:02:08,620 --> 00:02:09,880
an array of numbers.

29
00:02:10,150 --> 00:02:15,670
Instead, it'll think the variable can hold an array of strings or a single number.

30
00:02:16,090 --> 00:02:20,290
Therefore, these square brackets must be applied to both types.

31
00:02:20,860 --> 00:02:24,430
One last thing TypeScript can infer union types.

32
00:02:24,730 --> 00:02:30,460
For example, we can get the same union type if the array is filled with strings and numbers.

33
00:02:30,670 --> 00:02:32,530
So let's remove the annotation.

34
00:02:35,130 --> 00:02:38,150
Next, let's add a number and string to the array.

35
00:02:40,680 --> 00:02:47,370
The array stores two types if we hover our mouse over the variable, the editor will tell us we have

36
00:02:47,370 --> 00:02:49,860
a union type that's very convenient.

37
00:02:50,160 --> 00:02:55,890
We don't have to worry about TypeScript accidentally adding the any type which we should avoid.

38
00:02:56,220 --> 00:02:59,280
Let's move on to objects in the following lecture.