TypeScript Intermediate: Decorators

Name: TypeScript Intermediate: Decorators
Author: Mark Nair

Learn about TypeScript’s decorators and their metaprogramming applications.

Preview the first lesson free — get full access to all 5 lessons.

Course: On-Demand

Hi, my name is Mark Mayer, and in these lessons, you'll learn about decorators in TypeScript. First I'll give you an introduction to decorators and why we use them, and we'll talk specifically about decorator factories, property decorators, class decorators, and method decorators. According to the TypeScript documentation, a decorator is a special kind of declaration that you can attach to a class, method, accessor, property, or a parameter. Just use the form at expression, where the expression has to evaluate a function, and then we'll call that function, it will call at runtime, about the information that it has. So in other words, decorators extend the functionality of a class, a method, or a property. Let's take a look at an example. So I'm using a different IDE right now, a template, and the reason for that is because we need to take a peek at the TS config file. If we're going to mess around with decorators, we have to turn on an experimental option. So the way I'm going to do this over here on these dots, I'll click this, and I'll show hidden files. And then right here is the TS config, and we have all this, let's stretch this out, so you can really take a good peek, I have a lot of stuff in here. So what I want down here is this area, it says experimental decorators, and the value is true. So I'm going to uncomment this right there, and that will give us access to the decorator functionality that we need. Now, I don't need to see all of this business, so I'm going to click this and hide hidden files, and back to index.ts. So let's quickly make something, I will make a new class called bicycle. Now let's first I'll make a constructor, and then I'm just going to log out a nice phrase assembling bicycle, all right, pretty easy. Now make a new const, I'll bite, and I'll call that the firefly brand, and let's just log this out. And when I run it over here on the console, I see assembling bicycle, which is what I want in the log, and firefly is the brand, and that's I'm accessing the brand right here. All right, now I'm going to add a decorator to this. Now remember, a decorator just extends this functionality. Now the way I'll do this is appear above class, I'll add a new function called ringbell. Now you'll notice here that since it's a decorator, I'm capitalizing the first letter, not a mandatory thing, but it's something that when people see your code, they say, oh, I see it's a decorate function. All right, but just a regular function inside of here, I'll just log out to access the constructor and I'm right ahead of the class or above the class. I'll use the ampersand or at symbol, right? And call the constructor, all the decorator at ringbell. And that will tell TypeScript, ooh, I want to use a decorator, and I'm decorating the class bicycle. Now right here, I have a little error line, ringbell accepts too few arguments to use as the decorator. Well, the reason for that is we haven't given it any parameters. So let's pop back in here and up at the top, I'm going to add a target. The target is the function. This is what I'm targeting right here. Let's run this. And here we have beep comes first and then assembly bicycle and then firefly. So that's working. The decorator is running with beep. Now the decorator runs before all of this happens down here. As a matter of fact, if I just comment out the instance, run this again, we'll see beep. So right here, the decorator, we say ringbell and it just does it and it does the code inside of it, let's take a different peak inside by logging out this thing right here called target. What is that? Well, I'm going to log target. Run this and now I have the target, which is class bicycle and that is the target of the decorator that's right here. And that is just the overview of our intro to decorators. And this is how they work. Thanks for watching. Stay tuned for the next lesson where I'll show you how decorator factories work.

Intermediate Provider : Mark Nair 5 Lessons · 16m in English

Course Description

‏In these lessons, you will learn about metaprogramming by applying decorators to your typescript code. We will explore the different types of decorators: Decorator Factories, Property Decorators, Class Decorators, and Method Decorators.

‏Decorator Factories allow us to create dynamic decorators with parameters, providing greater flexibility and customization. By encapsulating reusable behavior within decorators, we can build annotations that suit various use cases. ‏Property Decorators empower developers to modify and enrich class properties. Techniques for validating input, tracking changes, and enhancing property behavior add a new dimension to object-oriented design.

‏Class Decorators offer transformative changes to class definitions. We can alter inheritance and add additional functionalities, unlocking new architectural possibilities. ‏Method Decorators provide fine-tuning capabilities for method behavior. ‏Using dynamic metaprogramming with decorators will give your applications enhanced functionalities with maintainable code.

What You'll Learn

Explain the distinctions and applications of Decorator Factories, Property Decorators, Class Decorators, and Method Decorators
Apply decorators to TypeScript code to work with metaprogramming
Create dynamic decorators with parameters using Decorator Factories
Modify and enrich class properties using Property Decorators to validate input and track changes
Transform class definitions with Class Decorators to alter inheritance and add functionalities
Fine-tune method behavior using Method Decorators

Key Takeaways

Decorators enable metaprogramming in TypeScript by being applied directly to your code.
Decorator Factories allow creation of dynamic decorators with parameters for greater flexibility and customization.
Property Decorators can validate input, track changes, and enhance property behavior in object-oriented design.
Class Decorators can alter inheritance and add additional functionalities to class definitions.
Using dynamic metaprogramming with decorators gives applications enhanced functionalities with maintainable code.

Frequently Asked Questions

What types of decorators does this course cover?

The course explores Decorator Factories, Property Decorators, Class Decorators, and Method Decorators.

What will I be able to do after taking this course?

You will gain proficiency in using TypeScript Decorators to modify class properties, transform class definitions, and fine-tune method behavior, and you will be able to explain the distinctions and applications of the different decorator types.

What lessons are included in this course?

The course includes lessons on Introduction to Decorators, Decorator Factories, Property Decorators, Class Decorators, and Method Decorators.

What skills does this course help develop?

The course develops skills in the Decorator Pattern, Maintaining Code, and Template Metaprogramming.

What is the focus of this TypeScript course?

The course focuses on metaprogramming by applying decorators to your TypeScript code to give applications enhanced functionalities with maintainable code.