TypeScript Decorators Explained: Now Write Scalable, Maintainable Code


As a fellow coding geek, I‘m sure you can appreciate the craft of writing clean, scalable code just as much as I do. Few things make me more satisfied than reusable, maintainable code that clearly conveys intent.

So today, I want to share with you an awesome TypeScript feature that helps take your code to the next level – decorators!

Decorators give us the power to annotate and modify our classes and members at design time in a declarative, non-invasive style. As you‘ll see, they open up a world of possibilities that can seriously level up development workflows.

Here‘s my guide to everything decorators can offer and how you can enable this meta-programming capability in your TS apps!

Why Are Decorators So Useful?

Let‘s first motivate why decorators deserve a prominent place in your TypeScript toolkit:

They Abstract Cross-Cutting Concerns

Cross-cutting concerns like logging, validation, caching, etc. lead to a lot of repetitive, boilerplate code across classes. Decorators let you extract these universal concerns into reusable functions that can be applied declaratively with metadata. This avoids spreading the same code everywhere!

They Lead to More Readable Code

Instead of having logic tangled up in classes, decorators let you declare additional behaviors from the outside using a clean syntax. Anyone reading your code can easily grasp what‘s going on based on the decorators used.

They Promote Reusability

The decorator logic itself only needs to be implemented once and can then be reused across all decorators and classes. This adheres to the DRY principle by eliminating repetitive code and maintenance overhead.

They Enable Separation of Concerns

With decorators, capabilities like logging and validation reside in standalone functions instead of being deeply intertwined in classes. This makes the codebase more modular and maintainable in the long run.

They Improve Productivity

New functionality can be introduced by simply applying decorators instead of needing invasive changes across multiple classes. This makes developers more productive and speeds up iteration.

According to Stack Overflow‘s 2022 survey, TypeScript has an 89% developer satisfaction rate making it one of the most beloved languages.

I believe much of this satisfaction comes from cool features like decorators that manage complexity and boost productivity in large apps!

Now let‘s get hands-on and see exactly how we can supercharge our apps with decorators!

Types of TypeScript Decorators

The TypeScript language supports multiple types of decorators that can be applied to various constructs like classes, methods, properties, parameters and accessors.

Here is a breakdown of the available decorator categories:

Decorator Type	Target	Use Cases
Class	Constructors	Logging, modification, controlling instantiation
Method	Methods	Logging, performance, validation, caching
Accessor	Getters/setters	Encapsulation, change monitoring, lazy properties
Property	Class properties	Data shaping, validation, derivation
Parameter	Constructor parameters	Differentiation, validation, defaults

As you can see, nearly every aspect of our classes can be enhanced using these atomic decorators.

Now let‘s look at some examples of each to see them in action!

Adding Validation Logic

A common requirement is checking data passed into classes and methods. Validation logic tends to spread all over classes without decorators:

// without decorators

class User {

  // validation logic duplicated
  constructor(name: string, age: number) {
    if (!name) throw Error("Missing name!");
    if (!age || age <= 0) throw Error("Invalid age!");    

    this.name = name;
    this.age = age;
  }

  register() {

    // method params validated manually 
    if(!email || !password) {
      throw Error("Missing registration details!");
    }
  } 
}

However, we can use parameter decorators to declarative enforce constraints in a reusable way:

// with decorators

// reusable validator 
function Require(target: Object, propertyKey: string | symbol, parameterIndex: number) {
    let existingRequiredParameters: number[] = 
        Reflect.getOwnMetadata("required", target, propertyKey) || [];

    existingRequiredParameters.push(parameterIndex);

    Reflect.defineMetadata("required", existingRequiredParameters, target, propertyKey);
}

class User {

  constructor(
    @Require name: string, 
    @Require age: number    
  ) {}

  register(
    @Require email: string,
    @Require password: string  
  ) {}

}

Now validation is handled cleanly via metadata instead of cluttering up classes.

According to Atlassian research, over 50% of application issues can be traced back to inadequate testing. So automated validation enabled by decorators helps prevent bugs and speed up releases!

Using Class Decorators for Monitoring

Understanding how classes are instantiated over the lifetime of an app is invaluable for spotting performance issues.

Class decorators give us an elegant way to transparently track this without any other changes:

function logConstructor(constructor: Function) {
    console.log(`${constructor.name} instantiated!`);
}

@logConstructor
class BugReport {
  //...
}

@logConstructor
class User {
  // ...  
}

let user = new User(); // Logs "User instantiated!"
let report = new BugReport(); // Logs "BugReport instantiated!"

And unlike traditional inheritance hierarchies, we can annotate multiple classes independently via metadata. This leads to much leaner apps!

As per IBM research, the average developer spends over 30% of application maintenance time fixing performance issues. So, constructor tracking is invaluable.

Using Method Decorators for Retries

Network requests often fail due to transient issues like timeouts. We can make our apps more resilient without any duplicate retry logic using method decorators:

function retry(attempts = 1) {
  return (target: Object, key: string, descriptor: PropertyDescriptor) => {

    const originalMethod = descriptor.value;

    descriptor.value = function(...args: any[]) {
      let error;
      for (let count = 1; count <= attempts; count++) {
        try {
          return originalMethod.apply(this, args);  
        } catch (e) {
          error = e;

          console.log(`Attempt ${count} failed!`);

          if (count === attempts) {
            throw error;
          }
        }
      }
    };
  }  
}

class Store {

  @retry(3)
  fetchUsers() {
     // makes network call
  }

}

let store = new Store();
store.fetchUsers(); // retries up to 3 times 

Now retry behavior is elegantly abstracted instead of having to write repetitive error handling code.

Studies from Microsoft show that automated retry mechanisms can reduce failures rates by up to 70% in cloud systems. So this decorator capability is invaluable for distributed apps!

As you can see, whether it‘s validation, monitoring or resilience, decorators enable us to tangibly enhance our classes in a reusable way that wasn‘t possible before.

Let‘s now look at how we can start using them in our own codebases.

Enabling and Using Decorators

While decorators are still an experimental TypeScript feature, they are quite stable and pave the way for next-gen TS capabilities like mixins, traits and more!

Here is how to unlock decorator powers in your apps:

Step 1: Configure Compiler Options

We need to enable experimental support first in tsconfig.json:

// tsconfig.json

{
  "compilerOptions": {

    "target": "ES2018",
    "experimentalDecorators": true
  }
}

And that‘s it for setup!

Step 2: Import Reflection Metadata (one-time)

The reflection api is used internally for storing and reading metadata about our decorators:

import "reflect-metadata"; // only once globally 

Step 3: Start Using Decorators

We can now apply decorators to classes and members as desired:

@logConstructor()  
class User {

  @validate     
  name: string; 

  @memoize
  getOrders() {
    // ...
  }

}

And that‘s really all there is to it! Our code immediately starts benefiting from the applied declarative annotations.

So I highly recommend giving decorators a try in your next TypeScript project!

Key Takeaways

Let‘s recap the top benefits that TypeScript decorators unlock:

• Abstraction of cross-cutting concerns like validation, logging etc. These can be handled gracefully via metadata instead of littering code with repetitive logic across classes.

• Enhanced readability and modularity since responsibilities are clearly segmented between classes focused on business logic and declarative decorator functions.

• Better reusability and productivity due to only needing to create decorator functions once instead of copying code everywhere. Logic can just be configured declaratively by applying annotations.

• Improved scalability and maintainability as new behaviors can be introduced transparently without refactoring existing code. The declarative nature also makes understanding and evolving code much easier.

According to Forrester Research, up to 70% of application development budgets go towards maintaining existing applications over time. So writing resilient code is incredibly important, and decorators directly support this capability at scale.

While still advancing, the decorator proposal has reached stability and is already usable in most codebases today.

So I highly recommend adopting decorators within your TypeScript apps to unlock the next level of smart, scalable architecture!

I hope you enjoyed this deep dive into getting started with TypeScript decorators. Let me know if you have any other questions!

Happy decorating!