0
1
00:00:00,000 --> 00:00:03,181
Alright so in this video we're
just going to see how to use
1

2
00:00:03,181 --> 00:00:06,541
arrays, how to type them and to
learn that we're going to do a
2

3
00:00:06,541 --> 00:00:09,981
very basic eh exercise, okay?
So here is the arrays that
3

4
00:00:09,981 --> 00:00:14,801
we're going to start with. So
as you can see just an array of
4

5
00:00:14,801 --> 00:00:18,641
persons so each person is an
object that has a name a job
5

6
00:00:18,641 --> 00:00:22,081
and an age that is a number and
what we want to display in the
6

7
00:00:22,081 --> 00:00:26,001
end is something like this okay
just three LI in one UL okay
7

8
00:00:26,001 --> 00:00:28,761
and display all the
informations of all the users
8

9
00:00:28,761 --> 00:00:32,641
alright so let's do that and
let's discover how to type an
9

10
00:00:32,641 --> 00:00:36,481
array so we're going to first
go back into our index.HTML and
10

11
00:00:36,481 --> 00:00:42,221
replace this paragraph here by
a a div and we're going to add
11

12
00:00:42,221 --> 00:00:45,421
an ID to this div and we're
going to call that app for now
12

13
00:00:45,421 --> 00:00:50,701
and we're going to inject our
code in this very div here.
13

14
00:00:51,721 --> 00:00:55,661
So basically what we want is in
the very end to inject
14

15
00:00:55,661 --> 00:01:00,501
something like this okay so
three LI with all the data
15

16
00:01:00,501 --> 00:01:05,341
inside a UL that will be
injected in the DIV app that is
16

17
00:01:05,341 --> 00:01:09,181
not visible for now so we have
to create a string out of our
17

18
00:01:09,181 --> 00:01:13,421
data that that will in the end
look like this so what we could
18

19
00:01:13,421 --> 00:01:18,861
do is loop over the person's
array here and and create an
19

20
00:01:18,861 --> 00:01:22,381
array of LI like this but first
what we could do is type
20

21
00:01:22,381 --> 00:01:26,301
correctly this array of persons
because for now there is the
21

22
00:01:26,301 --> 00:01:29,901
inference working so as you can
see it's object here that has
22

23
00:01:29,901 --> 00:01:34,941
this type and it's actually an
array of this object so that's
23

24
00:01:34,941 --> 00:01:39,661
actually the type that we want
to use but we want to probably
24

25
00:01:39,661 --> 00:01:43,581
specify it explicitly because
this way if another developer
25

26
00:01:43,581 --> 00:01:47,661
comes and try to add something
else like I don't know hair
26

27
00:01:47,661 --> 00:01:54,221
color red well if I add my type
here correctly it's not going
27

28
00:01:54,221 --> 00:01:57,021
to work and that's what we want
okay we want to make sure that
28

29
00:01:57,021 --> 00:02:01,681
we are strict with typing so
this is how you're going to
29

30
00:02:01,681 --> 00:02:05,521
define the type for an array of
something, okay? It could be,
30

31
00:02:05,521 --> 00:02:08,561
for example, an array of
number, like this, an array of
31

32
00:02:08,561 --> 00:02:12,001
anything, okay? You can do an
array of string, an array of
32

33
00:02:12,001 --> 00:02:15,641
boolean, but for now it's going
to be an array of objects and
33

34
00:02:15,641 --> 00:02:22,941
this very specific one. Okay so
now let's try to construct an
34

35
00:02:22,941 --> 00:02:29,241
array of LI so I'm going to
remove that And I'm going to
35

36
00:02:29,241 --> 00:02:34,281
create a formatted list. So in
the end this formatted list
36

37
00:02:34,281 --> 00:02:37,001
would just be an array of
string, right? So I'm going to
37

38
00:02:37,001 --> 00:02:44,281
say that it's going to be an
array of string. Now, What I'm
38

39
00:02:44,281 --> 00:02:46,441
going to use is I'm going to
use the map function that
39

40
00:02:46,441 --> 00:02:51,221
returns an array. So I'm going
to map over persons like this
40

41
00:02:51,221 --> 00:02:55,621
I'm going to map over it and
for each iterations so you can
41

42
00:02:55,621 --> 00:02:58,501
run a function that is going to
receive the person here as
42

43
00:02:58,501 --> 00:03:03,141
parameter and then you can
return something so technically
43

44
00:03:03,141 --> 00:03:07,301
since this is a string array
technically each iteration of
44

45
00:03:07,301 --> 00:03:13,541
the map should push one string
into the final array so it
45

46
00:03:13,541 --> 00:03:20,361
means that this function here
should return a string and what
46

47
00:03:20,361 --> 00:03:25,661
we want is basically just a
string that contains all the
47

48
00:03:25,661 --> 00:03:29,901
information about the user so
for example name and here I
48

49
00:03:29,901 --> 00:03:41,721
could add my person.name
job, person.job.
49

50
00:03:42,721 --> 00:03:47,701
And age
50

51
00:03:49,721 --> 00:03:59,121
person.age. All right, but
this is not fully typed. Okay
51

52
00:03:59,121 --> 00:04:03,921
we could for example also write
the type here of the person so
52

53
00:04:03,921 --> 00:04:06,401
again this is going to be a
little bit annoying because we
53

54
00:04:06,401 --> 00:04:10,481
will have to rewrite the type
the whole type here okay and
54

55
00:04:10,481 --> 00:04:14,881
maybe you want to reuse it but
that will be the next video so
55

56
00:04:14,881 --> 00:04:19,521
I have defined the type for the
person now okay so this is
56

57
00:04:19,521 --> 00:04:22,481
fully typed okay we have typed
the person we have typed what
57

58
00:04:22,481 --> 00:04:25,601
each iteration of the map is
going to return and we have
58

59
00:04:25,601 --> 00:04:31,161
type the result here so this is
very strictly typed and that's
59

60
00:04:31,161 --> 00:04:34,761
perfect. Now I could just log
what I have in my formated list
60

61
00:04:34,761 --> 00:04:42,181
so I'm going to log it. And see.
And okay we have an array that
61

62
00:04:42,181 --> 00:04:48,621
seems to contain what we want
perfect now I could create my
62

63
00:04:48,621 --> 00:04:53,301
"li list string" if I may say
so it's going to be a string
63

64
00:04:53,301 --> 00:04:58,741
and we have to make a string
out of this formatted list so
64

65
00:04:58,741 --> 00:05:01,301
that's pretty simple we can
just use formatedList.
65

66
00:05:01,301 --> 00:05:05,141
join and this is going to
concatenate all the elements
66

67
00:05:05,141 --> 00:05:07,941
one by one okay that's the
separator and we don't have any
67

68
00:05:07,941 --> 00:05:12,301
separator so as you can see
join() is returning a string so
68

69
00:05:12,301 --> 00:05:16,061
that's perfect we are matching
what we expect here okay so
69

70
00:05:16,061 --> 00:05:21,341
let's see what we have in the
"li list string" and yes okay
70

71
00:05:21,341 --> 00:05:25,341
that's a whole string that
looks like how we want. But we
71

72
00:05:25,341 --> 00:05:28,381
forgot to add the "li" around
here so I'm just going to add
72

73
00:05:28,381 --> 00:05:35,881
"li" here and "li" here Now we just
have to inject that in a "ul"
73

74
00:05:35,881 --> 00:05:40,761
that we will inject then in the
div app. So first we are going
74

75
00:05:40,761 --> 00:05:48,421
to target our div using its ID and
you'll notice that if you pass
75

76
00:05:48,421 --> 00:05:53,301
your mouse over getElementbyId
typescript has a type for
76

77
00:05:53,301 --> 00:05:56,901
what is returned by get element
by ID and it can be an HTML
77

78
00:05:56,901 --> 00:06:00,341
or it can be null and
indeed if I write something
78

79
00:06:00,341 --> 00:06:03,301
like this for example yes
indeed this is going to be null
79

80
00:06:03,301 --> 00:06:08,421
so if you want to tell type
script that you know that this
80

81
00:06:08,421 --> 00:06:11,701
is not going to be null and you
know that this is not going to
81

82
00:06:11,701 --> 00:06:16,881
be undefined you can use the
exclamation mark like this
82

83
00:06:16,881 --> 00:06:21,681
way you can call inner HTML on
it and inject something in it
83

84
00:06:21,681 --> 00:06:25,521
and so we are going to inject a
UL so I'm going to use back
84

85
00:06:25,521 --> 00:06:34,181
quotes like this , a ul,
and we're just going to add our
85

86
00:06:34,221 --> 00:06:42,161
li list string like this
and technically it's working.
86

87
00:06:42,161 --> 00:06:46,641
And it's fully typed. All
right? So that is how you're
87

88
00:06:46,641 --> 00:06:48,801
going to use arrays. So as you
can see it's not that
88

89
00:06:48,801 --> 00:06:52,401
complicated. Okay you just use
this syntax and try to type
89

90
00:06:52,401 --> 00:06:55,761
almost everything okay? The
more you type the more you are
90

91
00:06:55,761 --> 00:06:58,961
strict. And the more you're
strict and the less the code is
91

92
00:06:58,961 --> 00:07:03,121
going to be prone to generate
errors. All right so that's
92

93
00:07:03,121 --> 00:07:04,961
pretty much it. In the next
video we're going to talk about
93

94
00:07:04,961 --> 00:07:08,801
interfaces. Interfaces that are
a way to create your types and
94

95
00:07:08,801 --> 00:07:12,601
avoid repeating them everywhere
in the code. So see you in the next
95

96
00:07:12,601 --> 00:07:14,921
one.