1
00:00:01,250 --> 00:00:05,840
In this video I want to show you how we can still use arrays with multiple different types of values

2
00:00:05,840 --> 00:00:07,070
inside them.

3
00:00:07,070 --> 00:00:11,230
So let's look back over to our code editor and once again write out a quick example.

4
00:00:11,240 --> 00:00:15,680
I gonna put in a new comment down here that says flexible types and then I'm going to declare a new

5
00:00:15,680 --> 00:00:19,560
array called important dates like so.

6
00:00:19,580 --> 00:00:24,530
So this is going to be an array that contains some different important date values maybe some of them

7
00:00:24,590 --> 00:00:29,720
are going to be instances of date objects and maybe some of them are going to be strings that contain

8
00:00:29,720 --> 00:00:32,060
like a date inside them.

9
00:00:32,060 --> 00:00:35,000
So in other words I want to have two different types inside this array.

10
00:00:35,000 --> 00:00:37,340
Some are going to be instances of data objects.

11
00:00:37,340 --> 00:00:39,080
Some are going to be strings.

12
00:00:39,230 --> 00:00:44,690
So to do so I could simply write out a new date and then like an actual string and here's a 20 30 maybe

13
00:00:45,020 --> 00:00:46,510
10 10.

14
00:00:46,550 --> 00:00:53,150
Like so if I now hover over important dates I'll see an update a little type invitation here.

15
00:00:53,150 --> 00:00:53,830
So in this case.

16
00:00:53,840 --> 00:00:55,580
Notice how little pipe operator right there.

17
00:00:55,580 --> 00:00:57,910
We've spoken about that very briefly before.

18
00:00:57,920 --> 00:01:01,130
That's kind of like an or statement for types.

19
00:01:01,130 --> 00:01:06,350
So this can be read as saying this is going to be an array that contains elements that are a string

20
00:01:06,830 --> 00:01:08,750
or a date.

21
00:01:08,750 --> 00:01:13,620
So everything inside this array can be treated as a string or a date object.

22
00:01:13,630 --> 00:01:16,370
Now it is important to understand this annotation right here.

23
00:01:16,480 --> 00:01:22,270
If you ever happen to say only initialize the array with date objects and we hover over this once again

24
00:01:22,510 --> 00:01:25,920
typescript now thinks that this array will only contain dates.

25
00:01:26,020 --> 00:01:31,420
So if you wanted to specifically say that this array can contain multiple different types we would once

26
00:01:31,420 --> 00:01:34,130
again have to add in a manual annotation here.

27
00:01:34,300 --> 00:01:40,270
So I could put in a colon and then just like that syntax we saw in that tooltip we would say date or

28
00:01:40,330 --> 00:01:44,010
string and then the square brackets right after.

29
00:01:44,030 --> 00:01:49,630
And so now once again if I hover over important dates we've overridden type inference and said specifically

30
00:01:49,630 --> 00:01:53,620
this array contain can contain either type of value.

31
00:01:53,680 --> 00:01:59,240
So now right after that we could do important dates that push and add in a string.

32
00:01:59,240 --> 00:02:00,320
Well let's do a really string.

33
00:02:00,350 --> 00:02:01,050
Real string here.

34
00:02:01,050 --> 00:02:10,460
So 20 30 10 10 and important dates dot push new date like so and as you might guess if we now try to

35
00:02:10,460 --> 00:02:16,370
put in a new value that is just like a plane number we will see an error because that is neither a string

36
00:02:16,430 --> 00:02:20,730
nor a Date object now as we mentioned before.

37
00:02:20,750 --> 00:02:27,140
You will want to put in the sanitation if you ever do not initialize the array with a date literal and

38
00:02:27,140 --> 00:02:28,140
a string literal.

39
00:02:28,160 --> 00:02:32,180
Alternatively if you initialize it with an empty array you will want to have the annotation on there

40
00:02:32,180 --> 00:02:32,940
as well.

41
00:02:33,070 --> 00:02:37,250
If we don't put on that annotation with an empty array we're always going to end up with an array of

42
00:02:37,250 --> 00:02:41,900
the any type which we always want to avoid as much as possible.

43
00:02:41,960 --> 00:02:42,180
All right.

44
00:02:42,210 --> 00:02:46,840
That's how we put in multiple different types of values into one single an array.

45
00:02:46,860 --> 00:02:51,720
Let's take a quick pause right here and talk about where we are going to actually make use of these

46
00:02:51,720 --> 00:02:52,610
typed arrays.

47
00:02:52,620 --> 00:02:54,690
And as you might guess it's probably gonna be everywhere.

48
00:02:54,720 --> 00:02:57,040
So quick pause and I'll see you in just a minute.