Alright so in this video we're just going to see how to use 1
arrays, how to type them and to learn that we're going to do a 2
very basic eh exercise, okay? So here is the arrays that 3
we're going to start with. So as you can see just an array of 4
persons so each person is an object that has a name a job 5
and an age that is a number and what we want to display in the 6
end is something like this okay just three LI in one UL okay 7
and display all the informations of all the users 8
alright so let's do that and let's discover how to type an 9
array so we're going to first go back into our index.HTML and 10
replace this paragraph here by a a div and we're going to add 11
an ID to this div and we're going to call that app for now 12
and we're going to inject our code in this very div here. 13
So basically what we want is in the very end to inject 14
something like this okay so three LI with all the data 15
inside a UL that will be injected in the DIV app that is 16
not visible for now so we have to create a string out of our 17
data that that will in the end look like this so what we could 18
do is loop over the person's array here and and create an 19
array of LI like this but first what we could do is type 20
correctly this array of persons because for now there is the 21
inference working so as you can see it's object here that has 22
this type and it's actually an array of this object so that's 23
actually the type that we want to use but we want to probably 24
specify it explicitly because this way if another developer 25
comes and try to add something else like I don't know hair 26
color red well if I add my type here correctly it's not going 27
to work and that's what we want okay we want to make sure that 28
we are strict with typing so this is how you're going to 29
define the type for an array of something, okay? It could be, 30
for example, an array of number, like this, an array of 31
anything, okay? You can do an array of string, an array of 32
boolean, but for now it's going to be an array of objects and 33
this very specific one. Okay so now let's try to construct an 34
array of LI so I'm going to remove that And I'm going to 35
create a formatted list. So in the end this formatted list 36
would just be an array of string, right? So I'm going to 37
say that it's going to be an array of string. Now, What I'm 38
going to use is I'm going to use the map function that 39
returns an array. So I'm going to map over persons like this 40
I'm going to map over it and for each iterations so you can 41
run a function that is going to receive the person here as 42
parameter and then you can return something so technically 43
since this is a string array technically each iteration of 44
the map should push one string into the final array so it 45
means that this function here should return a string and what 46
we want is basically just a string that contains all the 47
information about the user so for example name and here I 48
could add my person.name job, person.job. 49
And age 50
person.age. All right, but this is not fully typed. Okay 51
we could for example also write the type here of the person so 52
again this is going to be a little bit annoying because we 53
will have to rewrite the type the whole type here okay and 54
maybe you want to reuse it but that will be the next video so 55
I have defined the type for the person now okay so this is 56
fully typed okay we have typed the person we have typed what 57
each iteration of the map is going to return and we have 58
type the result here so this is very strictly typed and that's 59
perfect. Now I could just log what I have in my formated list 60
so I'm going to log it. And see. And okay we have an array that 61
seems to contain what we want perfect now I could create my 62
"li list string" if I may say so it's going to be a string 63
and we have to make a string out of this formatted list so 64
that's pretty simple we can just use formatedList. 65
join and this is going to concatenate all the elements 66
one by one okay that's the separator and we don't have any 67
separator so as you can see join() is returning a string so 68
that's perfect we are matching what we expect here okay so 69
let's see what we have in the "li list string" and yes okay 70
that's a whole string that looks like how we want. But we 71
forgot to add the "li" around here so I'm just going to add 72
"li" here and "li" here Now we just have to inject that in a "ul" 73
that we will inject then in the div app. So first we are going 74
to target our div using its ID and you'll notice that if you pass 75
your mouse over getElementbyId typescript has a type for 76
what is returned by get element by ID and it can be an HTML 77
or it can be null and indeed if I write something 78
like this for example yes indeed this is going to be null 79
so if you want to tell type script that you know that this 80
is not going to be null and you know that this is not going to 81
be undefined you can use the exclamation mark like this 82
way you can call inner HTML on it and inject something in it 83
and so we are going to inject a UL so I'm going to use back 84
quotes like this , a ul, and we're just going to add our 85
li list string like this and technically it's working. 86
And it's fully typed. All right? So that is how you're 87
going to use arrays. So as you can see it's not that 88
complicated. Okay you just use this syntax and try to type 89
almost everything okay? The more you type the more you are 90
strict. And the more you're strict and the less the code is 91
going to be prone to generate errors. All right so that's 92
pretty much it. In the next video we're going to talk about 93
interfaces. Interfaces that are a way to create your types and 94
avoid repeating them everywhere in the code. So see you in the next 95
one.