1
00:00:01,130 --> 00:00:05,120
In the last video, we refactored our interface to have a little bit more generic name.

2
00:00:05,420 --> 00:00:07,190
We did the same thing with our function down here.

3
00:00:07,810 --> 00:00:10,610
So now I want to do something kind of interesting inside this file.

4
00:00:11,030 --> 00:00:14,150
Right now, we've got a project called Old Civic.

5
00:00:14,540 --> 00:00:17,390
I want to define another new object right underneath it.

6
00:00:17,900 --> 00:00:20,870
And I'm going to call this something like drink.

7
00:00:21,260 --> 00:00:26,150
Remember just a couple of videos ago, we did some examples on drinks and we said that a drink had like

8
00:00:26,150 --> 00:00:29,750
a color and carbonated and some other thing like that.

9
00:00:30,290 --> 00:00:34,430
Let's try expressing a drink object right here with some of those same properties.

10
00:00:34,950 --> 00:00:40,670
So I'm going to like maybe give this thing a color that is brown and maybe carbonated.

11
00:00:41,260 --> 00:00:42,590
Carbonated.

12
00:00:43,740 --> 00:00:49,530
And that'll be a boolean, true, and then maybe it will also have like that sugar content, and that's

13
00:00:49,530 --> 00:00:51,510
really supposed to be like no Ingrams.

14
00:00:51,510 --> 00:00:52,980
So like 40 grams of sugar.

15
00:00:53,980 --> 00:00:58,420
And then I'm going to give this one more property, I'm going to give it a summary, property summary

16
00:00:58,420 --> 00:01:00,610
is going to be a function any time we call it.

17
00:01:00,610 --> 00:01:01,930
It's going to return a string.

18
00:01:03,100 --> 00:01:08,440
And so inside of here, I'm going to return something like my drink is.

19
00:01:09,540 --> 00:01:14,100
Or how about has and then this diet sugar.

20
00:01:15,630 --> 00:01:20,340
Grams of sugar, that's reasonable, once again, notice that I'm using tactics here to form up the

21
00:01:20,340 --> 00:01:20,760
string.

22
00:01:21,890 --> 00:01:27,830
All right, so here's what gets really interesting, here's like the entire point of interfaces, if

23
00:01:27,830 --> 00:01:30,620
you don't get this quite right away, I'm going to show you a couple of diagrams to really help you

24
00:01:30,620 --> 00:01:31,550
understand what's going on.

25
00:01:32,240 --> 00:01:33,320
But here's what's going on.

26
00:01:34,070 --> 00:01:39,710
Notice how our old civic function has a summary function tied to it or some old civic object has a summary

27
00:01:39,710 --> 00:01:40,580
function tied to it.

28
00:01:41,390 --> 00:01:44,470
Our drink object also has a summary function tied to it.

29
00:01:45,200 --> 00:01:51,650
These two objects right here represent very different things inside of our application, but they both

30
00:01:51,650 --> 00:01:54,020
have a summary function that returns a string.

31
00:01:54,970 --> 00:01:59,860
That means that they are both considered to be reportable types.

32
00:02:00,920 --> 00:02:06,350
So because they both have a property called summary, that is a function that returns a string, this

33
00:02:06,350 --> 00:02:10,610
is of type reportable and this is of type reportable.

34
00:02:12,340 --> 00:02:19,360
Because they are both of type reportable, we can use both old civic and drink with the function we

35
00:02:19,360 --> 00:02:20,770
defined down here.

36
00:02:21,940 --> 00:02:28,300
So I can call Prince Summary with old Civic, I can also call Prince Summary with drink as well.

37
00:02:29,150 --> 00:02:33,620
And it works equally well with both of these very different objects.

38
00:02:34,630 --> 00:02:35,900
So what's the big point here?

39
00:02:35,920 --> 00:02:43,450
The point is that we can use a single interface to describe the shape or the different properties of

40
00:02:43,450 --> 00:02:45,340
very different objects.

41
00:02:46,660 --> 00:02:52,360
When we do so, we can have those objects implement different properties or different functions, and

42
00:02:52,360 --> 00:02:58,240
by doing so we can make these very different objects interact with different functions that we create,

43
00:02:58,240 --> 00:02:59,500
like print summary right here.

44
00:03:00,820 --> 00:03:04,280
So this encourages us to write somewhat generic looking functions.

45
00:03:04,300 --> 00:03:05,950
Notice how this is now a print summary.

46
00:03:06,460 --> 00:03:11,200
Would it have made sense to have this be like print vehicle and then pass in drink to it?

47
00:03:11,680 --> 00:03:13,900
No, I don't think that would have not made a lot of sense.

48
00:03:14,440 --> 00:03:20,350
So instead, we decided to make a somewhat generic looking interface that described what we had to do

49
00:03:20,350 --> 00:03:22,180
in order to call this function right here.

50
00:03:22,480 --> 00:03:23,140
I'm going to change that.

51
00:03:23,140 --> 00:03:24,490
Back to print summary, by the way.

52
00:03:26,120 --> 00:03:32,330
So in doing so, we've now got a much more reuseable function inside of our application, this function

53
00:03:32,330 --> 00:03:36,890
can be used with any type of object that satisfies the reportable interface.

54
00:03:38,230 --> 00:03:43,510
And this feature, this right here, is what is going to encourage us to write more reusable code with

55
00:03:43,510 --> 00:03:44,050
TypeScript.

56
00:03:44,260 --> 00:03:49,330
Now, I know this is like a super basic example and it's very contrived, but I just want this to be

57
00:03:49,330 --> 00:03:52,660
your first taste of how we're going to use interfaces in general.

58
00:03:53,620 --> 00:03:57,580
Now, to make sure everything is super crystal clear here, let's take a quick pause in the next video,

59
00:03:57,580 --> 00:04:01,780
we're going to kind of reiterate what we did and what the entire point on this application was.

60
00:04:02,150 --> 00:04:05,170
We're going to take a look at a couple of different diagrams to help you understand what's going on.

61
00:04:05,590 --> 00:04:10,210
And we'll move on to our next subject, where we're going to very quickly continue to see what the power

62
00:04:10,210 --> 00:04:12,700
of interfaces is inside of our applications.

63
00:04:12,910 --> 00:04:14,790
So quick pause and I'll see you in just a minute.