1
00:00:00,390 --> 00:00:06,090
In this lecture, we're going to look at how we can use interfaces to make our objects more readable.

2
00:00:06,300 --> 00:00:10,170
The syntax for annotating an object kind of looks ugly and messy.

3
00:00:10,440 --> 00:00:11,790
I'm not a huge fan of it.

4
00:00:12,120 --> 00:00:14,460
We have two objects being annotated.

5
00:00:14,760 --> 00:00:17,280
Let's clean this up by using an interface.

6
00:00:17,730 --> 00:00:22,980
An interface is a typescript specific feature for creating types for objects.

7
00:00:23,310 --> 00:00:26,220
It's an alternative syntax to what we're currently doing.

8
00:00:26,550 --> 00:00:29,280
Let's explore how an interface is created.

9
00:00:29,670 --> 00:00:36,060
Hopefully, once we've written an interface, it'll become clear why you may want to use them above

10
00:00:36,060 --> 00:00:36,920
the objects.

11
00:00:36,960 --> 00:00:39,300
We will type the interface keyword.

12
00:00:41,980 --> 00:00:48,340
The interfaith keyword allows us to create a custom type foreign object instead of directly adding the

13
00:00:48,340 --> 00:00:52,510
types on the variable, we can extract the types to an interface.

14
00:00:52,870 --> 00:00:57,910
After typing the interface, we need to provide a name while not required.

15
00:00:58,030 --> 00:01:02,500
Most developers like to use Pascal casing for their interface names.

16
00:01:02,800 --> 00:01:08,770
In addition, some developers will add a capital i at the beginning of their name, which is short for

17
00:01:08,770 --> 00:01:09,550
interface.

18
00:01:09,850 --> 00:01:13,750
It helps other developers identify this as an interface.

19
00:01:14,110 --> 00:01:18,190
For this example, we will set the name to AI accounts.

20
00:01:20,810 --> 00:01:23,660
Next, we can add the tapes for the object.

21
00:01:23,870 --> 00:01:25,430
We've already done so below.

22
00:01:25,730 --> 00:01:30,260
We will cut and paste the object annotation from the account variable.

23
00:01:32,920 --> 00:01:34,780
A couple of things worth mentioning.

24
00:01:35,050 --> 00:01:40,870
The interface cannot hold values, interfaces are not a replacement for objects.

25
00:01:41,200 --> 00:01:45,100
They're a feature for helping us outsource the typing of an object.

26
00:01:45,760 --> 00:01:52,180
Another thing worth mentioning is that they don't get compiled into JavaScript when we compile our code.

27
00:01:52,390 --> 00:01:56,410
The interface will be completely absent from our JavaScript file.

28
00:01:56,800 --> 00:02:02,740
Similar to how primitive types are removed from variables, interfaces get removed, too.

29
00:02:03,460 --> 00:02:05,920
Let's make our interface more interesting.

30
00:02:06,400 --> 00:02:10,090
Objects can have methods, so let's add a method.

31
00:02:10,419 --> 00:02:12,460
The method will be called deposit.

32
00:02:15,130 --> 00:02:19,870
It's completely acceptable to add methods, but there's one thing to keep in mind.

33
00:02:20,140 --> 00:02:22,690
We can't have business logic in our method.

34
00:02:22,990 --> 00:02:25,990
It's up to the object to implement the business logic.

35
00:02:26,350 --> 00:02:33,010
However we can and the parameters and return type, for this example, we won't have parameters.

36
00:02:33,280 --> 00:02:35,500
The return type will be void.

37
00:02:38,090 --> 00:02:44,720
The avoid type is a special type for functions, sometimes you may not want to return a value from your

38
00:02:44,720 --> 00:02:46,700
function if that's the case.

39
00:02:46,880 --> 00:02:51,860
You can annotate a function with the void type, which means no return value.

40
00:02:52,220 --> 00:02:53,180
One last thing?

41
00:02:53,360 --> 00:02:55,250
We will make this method optional.

42
00:02:57,870 --> 00:02:59,490
Let's use our interface.

43
00:02:59,850 --> 00:03:05,280
We can apply the interface after the name of the variable instead of adding an object.

44
00:03:05,370 --> 00:03:07,920
We can pass it in the name of the interface.

45
00:03:10,560 --> 00:03:15,750
We have another variable called accounts, which is basically an array of accounts.

46
00:03:16,110 --> 00:03:19,200
It would make sense to apply the interface here, too.

47
00:03:19,710 --> 00:03:23,370
We will replace the object with the name of the interface.

48
00:03:23,700 --> 00:03:25,650
The square brackets can remain.

49
00:03:26,250 --> 00:03:28,640
This syntax will tell TypeScript.

50
00:03:28,650 --> 00:03:32,460
We will have an array of accounts by using an interface.

51
00:03:32,640 --> 00:03:34,770
Our code looks so much cleaner.

52
00:03:35,100 --> 00:03:40,470
I recommend using interfaces whenever working with objects in the next lecture.

53
00:03:40,590 --> 00:03:44,640
We'll look at an alternative syntax for creating objects.