1
00:00:00,170 --> 00:00:05,300
In this lecture, we're finally going to write a decorator for this demonstration.

2
00:00:05,300 --> 00:00:08,360
We will be working on a new file in your project.

3
00:00:08,360 --> 00:00:10,690
Create a file called Decorator.

4
00:00:10,740 --> 00:00:11,900
It's.

5
00:00:13,860 --> 00:00:17,010
Let's say we were creating a restaurant application.

6
00:00:17,010 --> 00:00:18,950
Restaurants need menus.

7
00:00:18,960 --> 00:00:23,100
I think it would make sense to create a class for each item on the menu.

8
00:00:23,130 --> 00:00:27,420
For our first menu item, we will create a class called Pizza.

9
00:00:29,470 --> 00:00:33,760
We will create another menu item with a class called hamburger.

10
00:00:35,730 --> 00:00:40,200
Both classes will have a property called ID with the string type.

11
00:00:42,350 --> 00:00:42,980
Great.

12
00:00:43,010 --> 00:00:48,140
We've got a couple of classes for our menu, but neither have an ID without an ID.

13
00:00:48,350 --> 00:00:51,350
It would be difficult to identify our menu items.

14
00:00:51,380 --> 00:00:55,520
One solution would be to add properties directly to our class.

15
00:00:55,520 --> 00:00:59,210
However, another solution would be to use decorators.

16
00:00:59,240 --> 00:01:02,920
Decorators have the power to override the class definition.

17
00:01:02,930 --> 00:01:06,860
Let's try using them to assign IDs to our classes.

18
00:01:06,890 --> 00:01:10,820
A decorator is written as a function above the two classes.

19
00:01:10,850 --> 00:01:13,550
Define a function called menu item.

20
00:01:15,690 --> 00:01:18,570
The name of our decorator is Pascal cased.

21
00:01:18,600 --> 00:01:24,850
It's not necessary to write the names of decorators in Pascal case, but it is standard practice.

22
00:01:24,870 --> 00:01:28,060
Two parameters must be added to your decorators.

23
00:01:28,080 --> 00:01:30,840
They are called value and context.

24
00:01:33,040 --> 00:01:37,210
Decorators can be applied to classes, methods or properties.

25
00:01:37,240 --> 00:01:42,070
The value parameter stores the value of the definition it is applied to.

26
00:01:42,100 --> 00:01:48,850
Whereas the context parameter contains information of the definition itself, such as if the decorator

27
00:01:48,850 --> 00:01:53,740
was applied to a class or method, the next step is to return a value.

28
00:01:53,770 --> 00:01:57,500
As mentioned earlier, decorators can override values.

29
00:01:57,520 --> 00:02:00,460
In our case, we're overriding the class.

30
00:02:00,490 --> 00:02:05,710
The return value of the function is based on the type of definition it's been applied to.

31
00:02:05,740 --> 00:02:11,500
In our code, since this decorator will be applied to classes, we must return a class.

32
00:02:11,530 --> 00:02:12,130
Return.

33
00:02:12,130 --> 00:02:15,160
The following class extends value.

34
00:02:17,230 --> 00:02:22,090
In most cases, you're most likely not going to override the entire class.

35
00:02:22,090 --> 00:02:28,920
Sometimes you might want to extend the existing class to define additional properties or methods.

36
00:02:28,930 --> 00:02:33,520
Whatever is returned by our function is going to be applied to our class.

37
00:02:33,550 --> 00:02:35,230
Let's give that a try.

38
00:02:35,350 --> 00:02:40,920
Decorators can be applied by adding the at symbol followed by the name of the decorator.

39
00:02:40,930 --> 00:02:45,580
We will apply the menu item decorator to the pizza class.

40
00:02:45,610 --> 00:02:49,090
Decorator sit on top of the class they're applied to.

41
00:02:51,140 --> 00:02:52,310
Just like that.

42
00:02:52,340 --> 00:02:54,770
We've created our first decorator.

43
00:02:54,770 --> 00:02:56,030
It doesn't do much.

44
00:02:56,030 --> 00:03:00,560
So let's modify the ID in the class from the decorator function.

45
00:03:00,560 --> 00:03:04,610
We're going to set the ID property to A, B, c.

46
00:03:06,850 --> 00:03:11,890
By adding properties to the target object, they'll be applied to our classes.

47
00:03:11,920 --> 00:03:14,120
Let's test if this is true.

48
00:03:14,140 --> 00:03:21,130
At the bottom of our classes, let's log the ID of the pizza class after creating a new instance.

49
00:03:22,960 --> 00:03:26,170
We can verify our code is working by compiling it.

50
00:03:26,170 --> 00:03:27,970
Switch over to the command line.

51
00:03:27,970 --> 00:03:32,440
Let's compile our script with the Npx TSC command.

52
00:03:34,420 --> 00:03:39,320
We aren't going to provide a file name to the command if we don't provide a file name.

53
00:03:39,340 --> 00:03:43,060
TypeScript will compile every file we have in our directory.

54
00:03:43,090 --> 00:03:45,790
Everything should work after compiling the script.

55
00:03:45,820 --> 00:03:50,080
Let's test our script by running the node decorator command.

56
00:03:52,160 --> 00:03:54,770
The ID has been set to ABC.

57
00:03:54,800 --> 00:03:58,100
Our decorator modified this property, as you can see.

58
00:03:58,130 --> 00:03:59,890
Decorators are very powerful.

59
00:03:59,900 --> 00:04:03,500
They allow us to modify and add properties to a class.

60
00:04:03,530 --> 00:04:08,070
We can take this a step further by passing on values to our decorators.

61
00:04:08,090 --> 00:04:12,920
At the end of the day, decorators are just functions like any other function.

62
00:04:12,920 --> 00:04:16,730
We pass in values to configure the behavior of the decorator.

63
00:04:16,760 --> 00:04:20,570
Back at the top of the file, we're going to modify our function.

64
00:04:20,570 --> 00:04:23,840
We need to use a closure for accepting properties.

65
00:04:23,870 --> 00:04:25,460
Let me show you what I mean.

66
00:04:25,490 --> 00:04:30,380
The menu item function will return the function for modifying the class.

67
00:04:35,170 --> 00:04:41,560
The outer function will be responsible for accepting values, whereas the inner function will be responsible

68
00:04:41,560 --> 00:04:45,900
for interacting with the targets in our outer functions parameters.

69
00:04:45,910 --> 00:04:47,880
We can accept incoming data.

70
00:04:47,890 --> 00:04:52,870
We will have one parameter called item ID with the string type.

71
00:04:54,850 --> 00:05:01,270
Next in the inner function, we will set the ID property to the item ID arguments.

72
00:05:03,290 --> 00:05:07,610
After modifying our decorator, we will get an error from TypeScript.

73
00:05:07,640 --> 00:05:12,050
It'll tell us we are calling the menu item decorator incorrectly.

74
00:05:12,080 --> 00:05:15,860
We need to call it like a function inside the parentheses.

75
00:05:15,860 --> 00:05:18,440
We can pass in whatever value we'd like.

76
00:05:18,470 --> 00:05:23,900
In the case of our menu item decorator, we need to pass in a string that will act as an ID.

77
00:05:24,140 --> 00:05:25,880
Let's pass in a, B, c.

78
00:05:28,420 --> 00:05:31,510
Interestingly, decorators are reusable.

79
00:05:31,510 --> 00:05:34,960
Let's apply the same decorator to the hamburger class.

80
00:05:34,990 --> 00:05:37,090
Give it any ID you'd like.

81
00:05:39,100 --> 00:05:44,320
With the help of decorators, both classes have their IDs set by the decorator.

82
00:05:44,350 --> 00:05:50,260
We have a simple example, but imagine if we wanted to add dozens of methods and properties to multiple

83
00:05:50,260 --> 00:05:52,680
classes by using a decorator.

84
00:05:52,690 --> 00:05:54,670
Extending a class is easy.

85
00:05:54,700 --> 00:05:59,320
Hopefully it's becoming clear as to why you may want to use decorators.

86
00:05:59,350 --> 00:06:03,130
They allow us to extend the class with properties and methods.

87
00:06:03,160 --> 00:06:09,830
Another benefit of decorators is being able to apply them directly to properties, methods and accessors.

88
00:06:09,850 --> 00:06:12,910
We don't have to apply them to the overall class.

89
00:06:12,940 --> 00:06:15,740
The syntax is different based on the target.

90
00:06:15,760 --> 00:06:21,000
For that reason, we won't be diving into how to create decorators for different targets.

91
00:06:21,010 --> 00:06:25,300
The main point of this lecture is to understand how decorators work.

92
00:06:25,330 --> 00:06:27,460
They're heavily used in Angular.

93
00:06:27,460 --> 00:06:30,880
It's unlikely we will be writing decorator functions.

94
00:06:30,880 --> 00:06:34,930
Instead, we will be using decorators defined by Angular.

95
00:06:34,960 --> 00:06:39,290
The decorators from the Angular framework will cover most of our needs.

96
00:06:39,290 --> 00:06:42,110
As long as you understand what decorators do.

97
00:06:42,140 --> 00:06:43,700
You should be good to go.

98
00:06:43,730 --> 00:06:46,580
This is the last lecture on TypeScript.

99
00:06:46,610 --> 00:06:50,330
There are so many features in TypeScript that we haven't got to cover.

100
00:06:50,330 --> 00:06:54,440
However, these features will be enough to get you through the angular course.

101
00:06:54,470 --> 00:06:58,580
As we progress through the course, we will cover additional features.

102
00:06:58,610 --> 00:07:01,010
I can't wait to get started with Angular.

103
00:07:01,040 --> 00:07:03,320
I'll see you in the next section.