1
00:00:00,950 --> 00:00:05,210
Our application is now future complete, but I want to mention one last thing around interfaces.

2
00:00:05,689 --> 00:00:11,210
Just a second ago, we added in a new requirement to our interface, we said that in order to be considered

3
00:00:11,210 --> 00:00:15,710
to be matchable, an object had to have a marker content method that returns a string.

4
00:00:16,600 --> 00:00:21,520
When we added in that additional requirement right there, we saw Eyre's pop up inside of our index

5
00:00:21,530 --> 00:00:26,380
doctor's file, specifically where we were passing in user and company to add marker.

6
00:00:27,540 --> 00:00:32,970
I want to try adding in a new property to interface, matchable back inside a custom map and just see

7
00:00:32,970 --> 00:00:34,040
Eyre's pop up again.

8
00:00:34,440 --> 00:00:38,730
So inside of custom map, I'm going to say that anything that wants to be considered to be makeable

9
00:00:38,760 --> 00:00:39,770
has to also have.

10
00:00:39,780 --> 00:00:42,960
How about a color property that is a string like so.

11
00:00:44,110 --> 00:00:47,590
Now, as soon as I add that in, I'll see my index file light up.

12
00:00:48,040 --> 00:00:51,520
If I open that once again, I will see areas around user and company.

13
00:00:52,210 --> 00:00:56,740
So the discussion I want to have here is around where we see error messages.

14
00:00:57,190 --> 00:01:01,030
Remember, the entire goal of TypeScript is to help us find errors in our code.

15
00:01:01,330 --> 00:01:06,730
And so part of that process is making sure that typescript can point us in the right direction and help

16
00:01:06,730 --> 00:01:09,410
us find like the root source of an error.

17
00:01:10,120 --> 00:01:16,300
So in this case, we added in a new requirement to an interface and we're seeing an error appear where

18
00:01:16,300 --> 00:01:19,270
we actually try to pass in some value to this function.

19
00:01:20,140 --> 00:01:24,650
Now, I'm going to suggest that maybe this is not the best place to see this error message.

20
00:01:25,240 --> 00:01:27,880
Think about what we would have to do to fix this air.

21
00:01:27,880 --> 00:01:33,520
At the end of the day, if we want to make this go away, we have to open up our definition for a user

22
00:01:33,520 --> 00:01:39,100
like the user class and the company class and modify those classes in both those classes.

23
00:01:39,100 --> 00:01:42,820
We would have to add in a new property of color to both them.

24
00:01:43,820 --> 00:01:49,850
So because we'd have to open up those class definitions, sing the air here is not super useful, it

25
00:01:49,850 --> 00:01:52,160
is useful to see an error, absolutely.

26
00:01:52,520 --> 00:01:57,230
But it's not really pointing us to the exact location of where we should go to fix this problem.

27
00:01:58,150 --> 00:02:03,490
So I want to tell you how we can add in a little bit more code to help TypeScript point us in the correct

28
00:02:03,490 --> 00:02:04,070
direction.

29
00:02:04,750 --> 00:02:07,110
Here's what we're going to do inside of custom map.

30
00:02:07,360 --> 00:02:11,170
I'm going to add in an expert statement for the interface that we just added.

31
00:02:11,990 --> 00:02:14,350
So we now have export interface makeable.

32
00:02:15,460 --> 00:02:21,010
So this is going to make the interface, we can import this into other files and refer to this as a

33
00:02:21,010 --> 00:02:21,730
separate type.

34
00:02:22,860 --> 00:02:29,550
So now I'm going to go back over to user notes and at the top I'm going to import that interface, so

35
00:02:29,550 --> 00:02:31,980
I'm going to import matchable.

36
00:02:34,980 --> 00:02:36,270
Custom map.

37
00:02:37,450 --> 00:02:42,400
And then inside of here, I'm going to add in right after my class definition, I'm going to say implements

38
00:02:42,700 --> 00:02:43,390
matchable.

39
00:02:44,290 --> 00:02:50,290
So what this does right here is it tells TypeScript we want to make sure that a instance of class user,

40
00:02:50,320 --> 00:02:56,270
like a user that we create satisfies all the properties required by the m'appelle interface.

41
00:02:56,920 --> 00:03:02,500
This sets up a very direct dependency between our user class and the custom map class or technically

42
00:03:02,500 --> 00:03:04,000
the custom map file, I suppose.

43
00:03:04,540 --> 00:03:07,240
So we've now declared our intention to typescript.

44
00:03:07,240 --> 00:03:12,940
We are saying we want every user we create to satisfy that interface because we eventually want users

45
00:03:12,970 --> 00:03:15,850
to be an argument to that ad marker function.

46
00:03:16,750 --> 00:03:22,030
So by adding in implements makeable right here, we are telling TypeScript, help us, help us, make

47
00:03:22,030 --> 00:03:27,970
sure the user is implemented correctly, help us make sure that user has all the properties specified

48
00:03:27,970 --> 00:03:28,570
by matchable.

49
00:03:29,540 --> 00:03:35,810
If we now hover over yuzu, you'll see that it says, OK, property color is missing on class user,

50
00:03:35,810 --> 00:03:37,650
but it's required by that interface.

51
00:03:38,360 --> 00:03:43,940
So now we have a additional error message inside of here that can help us pinpoint the source of the

52
00:03:43,940 --> 00:03:45,030
error in our application.

53
00:03:45,050 --> 00:03:50,450
Right now, we have something that says very specifically, hey, your class user is not implemented

54
00:03:50,450 --> 00:03:50,990
correctly.

55
00:03:51,710 --> 00:03:55,820
So we're still seeing an error message, just like we were saying before, inside of Index Dotty's.

56
00:03:55,970 --> 00:04:00,370
But now the difference is that TypeScript is helping us point out the true source of the error.

57
00:04:00,650 --> 00:04:05,750
It's helping us understand that if we want this error to go away, we have to update our user class

58
00:04:05,750 --> 00:04:06,440
definition.

59
00:04:07,450 --> 00:04:12,610
So as you might guess, we could fix this up by adding in a color property that is a string and I'll

60
00:04:12,610 --> 00:04:15,380
initialize it as like, you know, red or something like that right there as well.

61
00:04:18,000 --> 00:04:23,130
And as soon as I add that in, air goes away and the number of errors inside of index starts goes down

62
00:04:23,130 --> 00:04:23,610
to one.

63
00:04:24,660 --> 00:04:30,000
So, again, the entire idea behind this implements clause right here is we are telling TypeScript,

64
00:04:30,150 --> 00:04:32,550
help us satisfy this interface.

65
00:04:32,550 --> 00:04:35,940
We want to make sure that user can be considered to be acceptable.

66
00:04:36,510 --> 00:04:40,530
And so TypeScript is going to do some additional checking of our class and make sure we have all the

67
00:04:40,530 --> 00:04:41,420
correct properties.

68
00:04:42,060 --> 00:04:43,780
You do not have to do this.

69
00:04:43,800 --> 00:04:45,600
This is not required at all.

70
00:04:46,140 --> 00:04:51,420
The reason we would decide to add in this implements clause right here to a class is so that if we fail

71
00:04:51,420 --> 00:04:56,580
to properly implement an interface, typescript can point us to the true source of the error.

72
00:04:56,990 --> 00:05:02,910
Our definition of the class, as opposed to when we try to pass a value or an instance of that class

73
00:05:02,910 --> 00:05:04,110
into a given function.

74
00:05:05,120 --> 00:05:08,720
So if we wanted to, we could go through the same process with the company as well inside of company

75
00:05:08,730 --> 00:05:12,800
Dotty's, we could add in an import statement for matchable.

76
00:05:14,090 --> 00:05:15,230
From custom map.

77
00:05:16,460 --> 00:05:18,110
And then I'll say implements.

78
00:05:19,560 --> 00:05:20,280
M'appelle.

79
00:05:21,480 --> 00:05:26,070
And now, once again, we get an air on company and it tells us we have to have color that is a string,

80
00:05:26,250 --> 00:05:27,500
but we did not provide it.

81
00:05:27,990 --> 00:05:33,300
So if we add in color, that is a string and I'll just say red like so right there on the same line

82
00:05:33,510 --> 00:05:36,060
here goes away and we're back to be in perfect.

83
00:05:37,170 --> 00:05:41,670
All right, so again, 100 percent optional, totally up to you, you will see some projects that use

84
00:05:41,670 --> 00:05:46,710
this implements clause extensively to make sure that it's really clear to TypeScript and even other

85
00:05:46,710 --> 00:05:51,060
engineers that we are trying to make sure that class company satisfies that interface.

86
00:05:51,450 --> 00:05:53,240
If you don't put it in, no problem.

87
00:05:53,640 --> 00:05:58,680
The only thing it's going to do is help typescript help you and help under the other engineers.

88
00:05:58,680 --> 00:06:00,150
Understand what you are trying to do.

89
00:06:01,000 --> 00:06:05,880
OK, so quick pause right here and we'll wrap up this application for real this time in the next video.