1
00:00:01,060 --> 00:00:02,640
Our application is now feature complete.

2
00:00:02,650 --> 00:00:04,150
But I want to mention one last thing.

3
00:00:04,150 --> 00:00:05,710
Around interfaces.

4
00:00:05,710 --> 00:00:09,370
Just a second ago we added in a new requirement to our interface.

5
00:00:09,370 --> 00:00:14,740
We said that in order to be considered to be marketable an object had to have a marker content method

6
00:00:14,770 --> 00:00:16,570
that returned a string.

7
00:00:16,660 --> 00:00:21,580
When we added in that additional requirement right there we saw errors pop up inside of our index dot

8
00:00:21,590 --> 00:00:28,490
test file specifically where we were passing and user and company to add marker on to try adding in

9
00:00:28,520 --> 00:00:34,490
a new property to interface manageable back inside of custom map and just see errors pop up again.

10
00:00:34,520 --> 00:00:39,020
So inside of custom map I'm going to say that anything that wants to be considered to be malleable has

11
00:00:39,020 --> 00:00:45,910
to also have How about a color property that is a string like so now as soon as I add that in I'll see

12
00:00:45,910 --> 00:00:47,930
my index dot test file light up.

13
00:00:48,160 --> 00:00:52,110
If I open that once again I will see errors around user and company.

14
00:00:52,210 --> 00:00:57,230
So the discussion I want to have here is around where we see error messages.

15
00:00:57,250 --> 00:01:01,420
Remember the entire goal of typescript is to help us find errors in our code.

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

17
00:01:06,730 --> 00:01:10,160
us find like the root source of an error.

18
00:01:10,180 --> 00:01:13,900
So in this case we added in a new requirement to an interface.

19
00:01:14,140 --> 00:01:20,200
And we're seeing an error appear where we actually try to pass in some value to this function.

20
00:01:20,230 --> 00:01:25,250
Now I'm gonna suggest that maybe this is not the best place to see this error message.

21
00:01:25,270 --> 00:01:28,590
Think about what we would have to do to fix this air at the end of the day.

22
00:01:28,600 --> 00:01:34,630
If we want to make this error go away we have to open up our definition for a user like the User class

23
00:01:34,990 --> 00:01:41,170
and the company class and modify those classes in both those classes we would have to add in a new property

24
00:01:41,380 --> 00:01:47,920
of color to both them so because we would have to open up those class definitions seeing the air here

25
00:01:47,950 --> 00:01:49,640
is not super useful.

26
00:01:49,720 --> 00:01:51,460
It is useful to see an error.

27
00:01:51,460 --> 00:01:57,190
Absolutely but it's not really pointing us to the exact location of where we should go to fix this problem

28
00:01:58,210 --> 00:02:03,500
so I want to tell you how we can add in a little bit more code to help typescript point us in the correct

29
00:02:03,500 --> 00:02:04,770
direction.

30
00:02:04,820 --> 00:02:07,360
Here's what we're going to do inside of custom map.

31
00:02:07,460 --> 00:02:13,850
I'm going to add in an export statement for the interface that we just added so we now have export interface

32
00:02:13,850 --> 00:02:15,420
methyl.

33
00:02:15,520 --> 00:02:21,370
So this is going to make the interface we can import this into other files and refer to this as a separate

34
00:02:21,370 --> 00:02:22,680
type.

35
00:02:22,870 --> 00:02:29,560
It's now going to go back over to user dot t s and at the top I'm going to import that interface so

36
00:02:29,560 --> 00:02:40,040
I'm gonna import malleable from custom map and then inside of here I'm going to add in right after my

37
00:02:40,040 --> 00:02:44,190
class definition I'm going to say implements malleable.

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

39
00:02:50,360 --> 00:02:56,960
like a user that we create satisfies all the properties required by the mapping will interface.

40
00:02:56,990 --> 00:03:02,480
This sets up a very direct dependency between our User class and the custom map class or technically

41
00:03:02,480 --> 00:03:04,580
the custom map file I suppose.

42
00:03:04,580 --> 00:03:10,610
So we've now declared our intention to typescript we are saying we want every user recreate to satisfy

43
00:03:10,610 --> 00:03:17,390
that interface because we eventually want users to be an argument to that ad marker function so by adding

44
00:03:17,390 --> 00:03:24,200
in implements capital all right here we are telling typescript help us help us make sure user is implemented

45
00:03:24,200 --> 00:03:24,640
correctly.

46
00:03:24,650 --> 00:03:31,090
Help us make sure that user has all the properties specified by manageable if we now hover over a user

47
00:03:31,330 --> 00:03:38,420
you'll see that it says OK property Color is missing on class user but it's required by that interface.

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

49
00:03:43,930 --> 00:03:45,620
error in our application right now.

50
00:03:45,640 --> 00:03:51,580
We have something that says very specifically Hey you're a class user is not implemented correctly.

51
00:03:51,760 --> 00:03:55,860
So we're still seeing an error message just like we were seeing the before inside of index dot yes.

52
00:03:56,020 --> 00:04:00,910
But now the difference is that typescript is helping us point out the true source of the error it's

53
00:04:00,910 --> 00:04:07,440
helping us understand that if we want this area to go away we have to update our user class definition.

54
00:04:07,520 --> 00:04:13,130
So as you might guess we could fix this up by adding in a color property that is a string and I'll initialize

55
00:04:13,130 --> 00:04:19,730
it as like you know red or some like that right there as well and as soon as I add that in air goes

56
00:04:19,730 --> 00:04:24,700
away and the number of errors inside of index dot T.S. goes down to 1.

57
00:04:24,710 --> 00:04:30,560
So again the entire idea behind this implements clause right here is we are telling typescript help

58
00:04:30,620 --> 00:04:36,530
us satisfy this interface we want to make sure that user can be considered to be mapping all.

59
00:04:36,620 --> 00:04:40,520
And so typescript is going to do some additional checking of our class and make sure we have all the

60
00:04:40,520 --> 00:04:41,990
correct properties.

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

62
00:04:43,790 --> 00:04:46,170
This is not required at all.

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

64
00:04:51,440 --> 00:04:56,880
to properly implement an interface typescript can point us to the true source of the error.

65
00:04:57,110 --> 00:05:03,290
Our definition of the class as opposed to when we try to pass a value or an instance of that class into

66
00:05:03,290 --> 00:05:08,400
a given function so he wanted to we could go through the same process with company as well inside of

67
00:05:08,400 --> 00:05:09,510
company not to us.

68
00:05:09,630 --> 00:05:20,330
We could add in an import statement for mapping all from custom map and then I'll say implements malleable

69
00:05:21,600 --> 00:05:26,280
and now once again we get an error on company and it tells us we have to have color that is a string.

70
00:05:26,280 --> 00:05:28,050
But we did not provide it.

71
00:05:28,050 --> 00:05:33,780
So if we add in color that is a string and I'll just say red like so right there on the same line it

72
00:05:33,810 --> 00:05:37,580
goes away and we're back to be imperfect All right.

73
00:05:37,610 --> 00:05:40,040
So again hundred percent optional totally up to you.

74
00:05:40,040 --> 00:05:44,630
You will see some projects that use this implements clause extensively to make sure that it's really

75
00:05:44,630 --> 00:05:50,330
clear to TypeScript and even other engineers that we are trying to make sure that class company satisfies

76
00:05:50,330 --> 00:05:52,530
that interface if you don't put it in.

77
00:05:52,550 --> 00:05:53,690
No problem.

78
00:05:53,720 --> 00:05:59,210
The only thing that's going to do is help typescript help you and help under their other engineers understand

79
00:05:59,210 --> 00:06:00,930
what you are trying to do.

80
00:06:00,940 --> 00:06:01,170
OK.

81
00:06:01,190 --> 00:06:05,870
So quick pause right here and we'll wrap up this application for real this time in the next video.