Typescript Tips and tricks for JS Developers (Part2)

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 🚩:
- Will this function or class be required to work with a variety of data types ❔
- 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 :
Thanks 🙏