0
1
00:00:00,000 --> 00:00:03,501
Alright so in this video we're
going to talk about interfaces
1

2
00:00:03,501 --> 00:00:07,901
that are a way to create your
own types, so that's
2

3
00:00:07,901 --> 00:00:10,781
something that we do a lot with
typescript so that is a very
3

4
00:00:10,781 --> 00:00:14,461
important concept and you'll
see that it's actually pretty
4

5
00:00:14,461 --> 00:00:17,741
simple and you also see that
there are actually two ways of
5

6
00:00:17,741 --> 00:00:22,381
creating your own types we have
interfaces and we have types
6

7
00:00:22,381 --> 00:00:26,541
but we're going to talk about
types later for now we're just
7

8
00:00:26,541 --> 00:00:30,461
going to use interfaces and I
personally use almost only
8

9
00:00:30,461 --> 00:00:36,321
interfaces. So when you want to
create your own type you can do
9

10
00:00:36,321 --> 00:00:40,161
it like this, use the keyword
interface and then you have to
10

11
00:00:40,161 --> 00:00:43,681
use the Pascal case for your
interface so you have to start
11

12
00:00:43,681 --> 00:00:46,441
with an uppercase and for
example I could create 'Person'
12

13
00:00:46,441 --> 00:00:50,801
and then you append curly braces
like this and then inside you
13

14
00:00:50,801 --> 00:00:54,881
can declare your type for
example I could use what I have
14

15
00:00:54,881 --> 00:00:59,361
here so I could say that a
person is a name a job and an age
15

16
00:00:59,361 --> 00:01:04,761
and now I could just replace
what I've here by my person so
16

17
00:01:04,761 --> 00:01:08,761
that's what I'm going to do so
now as you can see it's easier
17

18
00:01:08,761 --> 00:01:14,201
to read we understand that it's
an array of person and then I'm
18

19
00:01:14,201 --> 00:01:23,501
going to replace that here as
well. And as you can see if I
19

20
00:01:23,501 --> 00:01:26,621
remove it actually by default
it's supposed to be a person
20

21
00:01:26,621 --> 00:01:31,821
yes because this is an array of
person so in each iteration I
21

22
00:01:31,821 --> 00:01:35,501
have one person so that's
perfect but you can write it
22

23
00:01:35,501 --> 00:01:39,021
like this and that's pretty
much it that's how you're going
23

24
00:01:39,021 --> 00:01:42,061
to create an interface and for
now we just created a string
24

25
00:01:42,061 --> 00:01:47,501
numbers, so I could create a isHappy
that could be a boolean
25

26
00:01:47,501 --> 00:01:50,541
and as soon as I do that as you
can see now it's not working
26

27
00:01:50,541 --> 00:01:53,661
anymore and if we read the
error it's saying that the
27

28
00:01:53,661 --> 00:01:59,321
property is happy is missing in
the type ,this,  so name, job
28

29
00:01:59,321 --> 00:02:05,081
age but is required in the type
person so you understand that
29

30
00:02:05,081 --> 00:02:09,081
you have to add isHappy and when
I press control space actually
30

31
00:02:09,081 --> 00:02:15,161
it's offered so I'm going to
say true for example but I
31

32
00:02:15,161 --> 00:02:18,201
could also make it optional
this way I don't have to
32

33
00:02:18,201 --> 00:02:24,001
provide it everywhere and I
could also have, I don't know, a
33

34
00:02:24,001 --> 00:02:29,681
friend list that could be an
array of person okay that is
34

35
00:02:29,681 --> 00:02:34,681
going to be non required but
here I could add a friend list
35

36
00:02:34,681 --> 00:02:39,281
that could be an array of
person and then I can just add
36

37
00:02:39,281 --> 00:02:42,321
a new person here
37

38
00:02:44,721 --> 00:02:52,361
Toby and I'm going to start
here, okay? So As you can see
38

39
00:02:52,361 --> 00:02:55,481
you can use interfaces into
other interfaces, there is no
39

40
00:02:55,481 --> 00:02:59,801
problem with that. And for
example I could also have a
40

41
00:02:59,801 --> 00:03:05,401
function in my interface okay I
could have a "sayHi" function so
41

42
00:03:05,401 --> 00:03:08,441
to type a function you're going
to do it like this you're going
42

43
00:03:08,441 --> 00:03:11,721
to say that it's a function
that returns and then you're
43

44
00:03:11,721 --> 00:03:14,761
going to say what is the type
so for example I could say that
44

45
00:03:14,761 --> 00:03:17,881
it's going to return void that
is a new type and it's when you
45

46
00:03:17,881 --> 00:03:21,241
don't return anything you're
just performing an action in
46

47
00:03:21,241 --> 00:03:27,721
the function okay and now here
in my person here I can have a
47

48
00:03:27,721 --> 00:03:33,901
sayHi and it's going to be a
function that does something and
48

49
00:03:33,901 --> 00:03:43,921
that's it okay so for example I
could write I am Alice but as
49

50
00:03:43,921 --> 00:03:47,681
you can see the sayHi function
is not optional so it's
50

51
00:03:47,681 --> 00:03:50,961
expected in the friend list
it's expected for each person
51

52
00:03:50,961 --> 00:03:55,601
so I'm going to make it
optional as well and now if I
52

53
00:03:55,601 --> 00:03:58,161
want to for example call this
function I can just choose my
53

54
00:03:58,161 --> 00:04:03,681
persons here then I'm going to
access the first one and just
54

55
00:04:03,681 --> 00:04:10,401
call sayHi and as you can see
it's going to say hey sayHi is
55

56
00:04:10,401 --> 00:04:13,841
probably undefined so you have
to make sure that it's not,
56

57
00:04:13,841 --> 00:04:17,601
before calling it so you have
to perform an if statement so
57

58
00:04:17,601 --> 00:04:21,921
to do that you can use again
the question mark so it's a bit
58

59
00:04:21,921 --> 00:04:26,401
odd but you can do it right
here and then use the dot, so
59

60
00:04:26,401 --> 00:04:28,641
right before the dot right
before calling the function
60

61
00:04:28,641 --> 00:04:32,401
you're just going to test if
it's defined or not and I'm
61

62
00:04:32,401 --> 00:04:37,281
going save and ta-da  "I am Alice"
so it's working and you
62

63
00:04:37,281 --> 00:04:41,201
could even send parameters to
your function I could have I
63

64
00:04:41,201 --> 00:04:45,121
don't know a color that is a
string and you can do whatever
64

65
00:04:45,121 --> 00:04:48,641
you want with it okay so now
I'm forced to send a string
65

66
00:04:48,641 --> 00:04:53,841
here so red for example and you
can use it if you want from the
66

67
00:04:53,841 --> 00:04:59,841
inside so "I am Alice ! my
favorite color is " and now you
67

68
00:04:59,841 --> 00:05:04,101
can receive the color and as
you can see typescript is
68

69
00:05:04,101 --> 00:05:07,461
quite flexible because even if
I don't have all the parameters
69

70
00:05:07,461 --> 00:05:10,261
it's not going to throw an
error that is the behavior of
70

71
00:05:10,261 --> 00:05:13,461
typescript it's very specific
with functions , if you say
71

72
00:05:13,461 --> 00:05:16,501
that you want this function to be
like this you don't actually
72

73
00:05:16,501 --> 00:05:21,941
have to use all the parameters
okay but if you receive them
73

74
00:05:21,941 --> 00:05:26,261
for example if I do color no if
I for example do I don't know
74

75
00:05:26,261 --> 00:05:31,141
uh country and make it a
boolean it's not going to work
75

76
00:05:31,141 --> 00:05:34,181
okay it's going to say no, if
you want a parameter it has to
76

77
00:05:34,181 --> 00:05:40,221
be a string So, it has to be a
string like this and this is
77

78
00:05:40,221 --> 00:05:43,341
going to work so this add more
flexibility if you don't want
78

79
00:05:43,341 --> 00:05:49,821
to use the parameter okay and
my favorite color is color I'm
79

80
00:05:49,821 --> 00:05:56,141
going to refresh. And yet my
favorite color is red. Okay? So
80

81
00:05:56,141 --> 00:05:59,501
that is pretty much it with
interfaces. In the next video
81

82
00:05:59,501 --> 00:06:01,741
we're going to talk about
classes because this is an
82

83
00:06:01,741 --> 00:06:05,581
important concept as well and
after that we're going to do an
83

84
00:06:05,581 --> 00:06:08,781
exercise to practice everything
that we've learned from now.
84

85
00:06:08,781 --> 00:06:12,461
Okay? So see you on the next
one.