Typescript Tips and tricks for JS Developers (Part2)

Rebai Ahmed

Jul 25, 2021·4 min read

Introduction 🚩:

Hallo 🇩🇪🇹🇳 :

Dear Followers and Readers, I'm so glad today to present for you my second part about Typescript Tips and tricks, I got positive feedback about the first part that didn't cover all the available tips and the rich skins provided by Typescript, so I decided to add a second part to talk about :

• Custom decorators
• Deeper with Generics (Constraints)

I hope it will be a helpful bog ✍️ dear community, Happy reading :)

#Tip1: Custom decorator 🔧 🔨

We will start with a very interesting and useful feature provided by Typescript is: “Custom Decorators” 🛡🛡 .

Decorators are a way to add annotation 🚧 and meta-programming syntax to classes and their properties or parameters for some scenarios,

For example in Angular this a list of use cases that we can use Decorators :

• Tracking component property changes through ngOnchanges.
• Calling unsubscribe to avoid memory leaks.
• Complicated calculations outside the Angular area.
• Calculate execution time
• Processing and logging errors.
• Using Storage API.
• Page Params

etc …

Problem ⛔️:

While developing some features in your project you will deal with routine actions, repeated tasks, and duplication of code 🚩! which will cause a bad smell as the project grows!

Solution ✅ :

With typescript, we can benefit from the custom decorator feature

I will show you an example of how to implement a custom decorator (Safe)

So we will implement an annotation ‘Safe’ that will be added to avoid unexpected errors while dealing with Storage API ⛑

Code explanation ✂️:

• SafeDecoratorParams: define the params type that can be passed to our decorator
• SafeDecoratorLogLevel: Enum type that represents the available Logging levels
• export function Safe<T>: defining the name of our decorator
• const originalMethod = descriptor.value: we first cache the original method implementation
• const logLevel = params.logLevel || SafeDecoratorLogLevel.Default: get the current Logging level
• descriptor.value = function (…args) {: Our custom logic (for our case when there is an error caught we will choose to make a console message or your custom error handler and return our descriptor(decorator)
• StorageService implementation :

Now we will add our decorator to the methods implemented in our storage-service

• App.component.ts :

Now we will inject our service inside the app component and make just a call for an unexisting item in localStorage: “test”, and check the two scenarios (without “@Safe”, with “@Safe” )

import { Component } from '@angular/core';import { StorageService } from './services/storage.service';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],})export class AppComponent {title = 'customDecoratorwith';constructor(private storageService: StorageService) {}ngOnInit() {console.log(StorageService.getItem('test'));}}

• Result without Decorator safe ✖️ :

• Result with Decorator safe ✔️ :

#Tip2: More deep with Generics (constraint)🔧 🔨:

Now I will try to explain something interesting about Typescript Generics not mentioned in the previous blog: “Generic constraint” ⛏.

So as we said TypeScript generics help us to write reusable code, but there are some things we should consider to work with Generics 🚩:

1. Will this function or class be required to work with a variety of data types ❔
2. Will this function or class be used in more than one place ❔

In addition, we can apply a constraint to Generic type parameters by using the “keyword extends” for more type checking and to ensure type properties exist.

Code-Example 📙 ✍️:

We are implementing a Generic function getLength(args: T) that will return the length of args passed as params!

Problem ⛔️: But if the args doesn't have a length property! 🚫 🚫

(an error will be thrown )

Solution ✅:

Defining an interface functtArgs for type checking and by adding

<T extends functArgs>

We are telling our compiler that will accept only args having the length property!

References 📓 📕:

• https://blog.devgenius.io/custom-method-decorators-in-angular-a-http-cache-decorator-fb21d1e09932
• https://github.com/DmitriyKhirniy/typescript-decorators
• https://levelup.gitconnected.com/building-custom-typescript-decorators-for-angular-4595816e7b87
• https://www.typescripttutorial.net/typescript-tutorial/typescript-generics/
• https://blog.logrocket.com/getting-started-with-typescript-generics/

Conclusion ✍️:

In conclusion, In part 2 of Typescript tips, I just tried to cover and explain interesting features like Custom Decorators and Generic Constraints that can be helpful and useful for JS developers while writing code on server-side or client-side. ⛹ ⛏

Waiting for your feedback :)

You can follow me :

Twitter

Github

Thanks 🙏