1
00:00:00,180 --> 00:00:04,980
In this lecture, we're going to discuss an experimental feature called Decorators.

2
00:00:05,220 --> 00:00:09,900
Every feature of TypeScript we've explored so far has been related to type safety.

3
00:00:10,200 --> 00:00:14,850
TypeScript does an extremely good job of helping us verify the types of our data.

4
00:00:15,180 --> 00:00:18,030
Type safety is the main selling point of TypeScript.

5
00:00:18,330 --> 00:00:21,900
There's another side of TypeScript we haven't had a chance to explore.

6
00:00:22,170 --> 00:00:25,350
It allows us to write next generation JavaScript.

7
00:00:25,890 --> 00:00:28,230
JavaScript is constantly evolving.

8
00:00:28,470 --> 00:00:33,450
There's an official committee responsible for deciding what features get added to the language.

9
00:00:33,900 --> 00:00:36,930
This committee is called T c 39.

10
00:00:37,530 --> 00:00:39,720
Their discussions are open to the public.

11
00:00:39,900 --> 00:00:41,850
We're able to view what they're working on.

12
00:00:42,060 --> 00:00:44,700
Typically, features go through a process.

13
00:00:45,240 --> 00:00:51,030
The first stage in the process is called straw person during this part of the process.

14
00:00:51,210 --> 00:00:53,960
Members of the committee may propose a new idea.

15
00:00:54,510 --> 00:00:59,370
If members like the idea, they'll move on to the next stage next.

16
00:00:59,580 --> 00:01:03,360
One of the members will begin drafting a document of the proposal.

17
00:01:03,750 --> 00:01:09,990
This document will include an extensive description of how the feature will work in the JavaScript language.

18
00:01:10,260 --> 00:01:14,820
At this point, members will discuss if there are problems with this proposal.

19
00:01:15,120 --> 00:01:20,640
The draft will be revised dozens of times throughout this process in the next stage.

20
00:01:20,820 --> 00:01:24,420
Members will begin writing the syntax rules for the feature.

21
00:01:24,750 --> 00:01:29,340
The team works with another team called Babel to make this feature a reality.

22
00:01:29,700 --> 00:01:34,590
Beeple is a library for writing next generation JavaScript in our applications.

23
00:01:34,860 --> 00:01:39,610
Developers can test new features before they become available in browsers.

24
00:01:40,170 --> 00:01:46,530
After feedback has been implemented, the next stage is where members discuss any last issues with the

25
00:01:46,530 --> 00:01:47,220
proposal.

26
00:01:47,520 --> 00:01:53,640
If there aren't, the feature is moved on to the last stage, which is to make the feature an official

27
00:01:53,640 --> 00:01:55,170
part of the language.

28
00:01:56,710 --> 00:02:02,920
In the resource section of this lecture, I provide a link to the official list of T. S. Thirty nine

29
00:02:02,920 --> 00:02:06,790
proposals, as you can see, the list is almost endless.

30
00:02:07,060 --> 00:02:10,090
The feature we're interested in is called decorators.

31
00:02:10,389 --> 00:02:14,350
As of this video, you should be able to find it under stage two.

32
00:02:17,060 --> 00:02:20,090
Decorators are an upcoming feature in JavaScript.

33
00:02:20,300 --> 00:02:22,820
It's a feature heavily used in Angular.

34
00:02:23,060 --> 00:02:26,930
If we want to learn angular learning decorators is a must.

35
00:02:27,170 --> 00:02:30,230
We have two options for working with decorators.

36
00:02:30,440 --> 00:02:33,830
We can use Babel, which will require additional setup.

37
00:02:34,130 --> 00:02:37,220
Luckily, TypeScript supports decorators.

38
00:02:37,520 --> 00:02:44,090
One of the extra benefits of using TypeScript is being able to access newer features in JavaScript.

39
00:02:44,690 --> 00:02:46,570
So what are decorators?

40
00:02:46,580 --> 00:02:48,140
Why does angular use them?

41
00:02:49,610 --> 00:02:54,020
Decorators are functions for extending business logic or adding metadata.

42
00:02:54,320 --> 00:02:57,590
Sounds cool, but doesn't really explain what decorators are.

43
00:02:57,830 --> 00:02:59,390
Let me give you an analogy.

44
00:02:59,840 --> 00:03:03,170
Let's imagine we had a Christmas tree by themselves.

45
00:03:03,200 --> 00:03:05,600
Christmas trees are plain and boring.

46
00:03:05,900 --> 00:03:08,180
That's why we add decorations to them.

47
00:03:08,450 --> 00:03:10,610
Decorations can liven up a tree.

48
00:03:10,940 --> 00:03:17,150
It doesn't matter how many decorations you've added to the tree, it's still considered a tree in a

49
00:03:17,150 --> 00:03:18,050
similar sense.

50
00:03:18,200 --> 00:03:25,280
Decorators work the same way they allow us to modify an existing piece of code after the decorator has

51
00:03:25,280 --> 00:03:31,640
made its modifications were returned the same piece of code, but with the modifications.

52
00:03:32,000 --> 00:03:35,720
Let's look at an example of what problems decorators solve.

53
00:03:35,960 --> 00:03:38,750
We have two classes with the same property.

54
00:03:39,080 --> 00:03:45,530
Imagine if we had two classes with dozens of similar properties and methods, we should avoid repeating

55
00:03:45,530 --> 00:03:47,630
the same code whenever possible.

56
00:03:47,930 --> 00:03:49,940
This problem is as old as time.

57
00:03:50,180 --> 00:03:55,130
Avoiding duplicate code is an issue developers face throughout the years.

58
00:03:55,160 --> 00:03:58,700
Developers have come up with solutions for fixing this issue.

59
00:03:59,030 --> 00:04:03,830
We can use high order components, composable functions and closures.

60
00:04:04,160 --> 00:04:10,670
You may be familiar with these solutions if you worked with React or view each of these solutions works,

61
00:04:10,790 --> 00:04:12,980
but there are some drawbacks to each of them.

62
00:04:13,640 --> 00:04:17,480
Decorators resolve a lot of the issues with these other patterns.

63
00:04:17,660 --> 00:04:24,860
One of the advantages of decorators is that we can apply them to classes, properties, methods, accessories

64
00:04:24,860 --> 00:04:26,030
and parameters.

65
00:04:26,300 --> 00:04:31,310
Thus, they can reach certain areas in our code where other patterns can't.

66
00:04:31,910 --> 00:04:33,350
All right, enough talk.

67
00:04:33,440 --> 00:04:35,150
Let's start writing some code.

68
00:04:35,540 --> 00:04:37,730
We'll get started in the following lecture.