Skip to main content

Utilizing Decorators in Typescript

Decorator is a quite good feature in Typescript even though it is currently still in an experimental state. But, because of its advantages, it is commonly used by any developer. Such a framework like Angular also heavily uses this feature from the beginning.

A decorator is a syntax for calling a function on the thing that it is decorated. It acts like a wrapper function or higher-order function that results in an improved thing or thing with additional things. The thing may be a class, class method, class property, or method property. The thing that will be decorated must have a specific type signature. A class decorator can only decorate a class, an object that has a constructor.

@mydecorator
class MyClass {}

The code above is similar to the following code.

class MyClass {}
const WrappedClass = mydecorator(MyClass);

We will take the example of utilizing a class decorator. First, we need to create a type of class constructor that passes a generic type for defining the shape of the class instance. The type can be generated by the new operator which is applied to a function that returns a generic type value.

type Constructor<T> = new (...args: any[]) => T;

Then, we set up our decorator by creating a function that accepts a class with a valid type as the first parameter. A valid type means that it extends the class constructor. Besides that, it should have specific properties or methods that can define the shape of the specified class instance. For example, the class will have the getValue() method that results in an object.

function withJson<T extends Constructor<{
  getValue: () => { point: number }
}>>(Class: T) {
  return class extends Class {
    getJson = () => {
      return JSON.stringify(this.getValue());
    }
  }
}

We can apply the function as a decorator for a class that aligns with the class constructor or in other words, it implements getValue() method.

@withJson
class MyClass {
    value = { point: 10 };
    getValue() {
    	return this.value;
    }
}

Then, we can create an instance of the class and call the getJson() method.

const myObject = new MyClass();
console.log(myObject.getJson());

But, Typescript will show an error by the previous code. It is because the decorator won't change the shape or type structure that will be interpreted by Typescript. The getJson() method won't be recognized as the valid property of the class instance. There are several solutions for this case. But, what more appropriate is by declaring a class which is defining the method as property and extending the declared class to the decorated class.

class Helper {
    getJson: any;
}

@withJson
class MyClass extends Helper {
    value = { point: 10 };
    getValue() {
    	return this.value;
    }
}

Last, how it is if we want to create a factory of a decorator that accepts any parameters for defining the resulting decorator. We can customize the withJson() method into a factory. As an example, we will create a factory that accepts a parameter as an additional value for the point property in the instance value.

const withJson = (additionalValue: number) => {
  return <T extends Constructor<{
    getValue: () => { point: number }
  }>>(Class: T) => {
    return class extends Class {
      getJson = () => {
        return JSON.stringify({ point: this.getValue().point + additionalValue});
      }
    }
  };
}

@withJson(5)
class MyClass extends Helper {
//...
}

const myObject = new MyClass();
console.log(myObject.getJson());

So, if the code above is run, it will result in { "point": 15 }.


Comments

Popular posts from this blog

Configuring Swap Memory on Ubuntu Using Ansible

If we maintain a Linux machine with a low memory capacity while we are required to run an application with high memory consumption, enabling swap memory is an option. Ansible can be utilized as a helper tool to automate the creation of swap memory. A swap file can be allocated in the available storage of the machine. The swap file then can be assigned as a swap memory. Firstly, we should prepare the inventory file. The following snippet is an example, you must provide your own configuration. [server] 192.168.1.2 [server:vars] ansible_user=root ansible_ssh_private_key_file=~/.ssh/id_rsa Secondly, we need to prepare the task file that contains not only the tasks but also some variables and connection information. For instance, we set /swapfile  as the name of our swap file. We also set the swap memory size to 2GB and the swappiness level to 60. - hosts: server become: true vars: swap_vars: size: 2G swappiness: 60 For simplicity, we only check the exi

Rangkaian Sensor Infrared dengan Photo Dioda

Keunggulan photodioda dibandingkan LDR adalah photodioda lebih tidak rentan terhadap noise karena hanya menerima sinar infrared, sedangkan LDR menerima seluruh cahaya yang ada termasuk infrared. Rangkaian yang akan kita gunakan adalah seperti gambar di bawah ini. Pada saat intensitas Infrared yang diterima Photodiode besar maka tahanan Photodiode menjadi kecil, sedangkan jika intensitas Infrared yang diterima Photodiode kecil maka tahanan yang dimiliki photodiode besar. Jika  tahanan photodiode kecil  maka tegangan  V- akan kecil . Misal tahanan photodiode mengecil menjadi 10kOhm. Maka dengan teorema pembagi tegangan: V- = Rrx/(Rrx + R2) x Vcc V- = 10 / (10+10) x Vcc V- = (1/2) x 5 Volt V- = 2.5 Volt Sedangkan jika  tahanan photodiode besar  maka tegangan  V- akan besar  (mendekati nilai Vcc). Misal tahanan photodiode menjadi 150kOhm. Maka dengan teorema pembagi tegangan: V- = Rrx/(Rrx + R2) x Vcc V- = 150 / (150+10) x Vcc V- = (150/160) x 5

Installing VSCode Server Manually on Ubuntu

I've ever gotten stuck on updating the VSCode server on my remote server because of an unstable connection between my remote server and visualstudio.com that host the updated server source codes. The download and update process failed over and over so I couldn't remotely access my remote files through VSCode. The solution is by downloading the server source codes through a host with a stable connection which in my case I downloaded from a cloud VPS server. Then I transfer the downloaded source codes as a compressed file to my remote server through SCP. Once the file had been on my remote sever, I extracted them and align the configuration. The more detailed steps are as follows. First, we should get the commit ID of our current VSCode application by clicking on the About option on the Help menu. The commit ID is a hexadecimal number like  92da9481c0904c6adfe372c12da3b7748d74bdcb . Then we can download the compressed server source codes as a single file from the host.

Resize VirtualBox LVM Storage

VirtualBox is a free solution to host virtual machines on your computer. It provides configuration options for many components on our machine such as memory, storage, networking, etc. It also allows us to resize our machine storage after its operating system is installed. LVM is a volume manager in a Linux platform that helps us to allocate partitions in the system and configure the storage size that will be utilized for a specific volume group. There are some points to be noticed when we work with LVM on VirtualBox to resize our storage. These are some steps that need to be performed. 1. Stop your machine before resizing the storage. 2. Set new storage size using GUI by selecting " File > Virtual Media Manager > Properties " then find the desired virtual hard disk name that will be resized. OR , by running a CLI program located in " Program Files\Oracle\VirtualBox\VBoxManage.exe ".  cd "/c/Program Files/Oracle/VirtualBox" ./VBoxManage.exe list

Managing MongoDB Records Using NestJS and Mongoose

NestJS is a framework for developing Node.js-based applications. It provides an additional abstraction layer on top of Express or other HTTP handlers and gives developers a stable foundation to build applications with structured procedures. Meanwhile, Mongoose is a schema modeling helper based on Node.js for MongoDB. There are several main steps to be performed for allowing our program to handle MongoDB records. First, we need to add the dependencies which are @nestjs/mongoose , mongoose , and @types/mongoose . Then, we need to define the connection configuration on the application module decorator. import { MongooseModule } from '@nestjs/mongoose'; @Module({ imports: [ MongooseModule.forRoot('mongodb://localhost:27017/mydb'), ], controllers: [AppController], providers: [AppService], }) Next, we create the schema definition using helpers provided by NestJS and Mongoose. The following snippet is an example with a declaration of index setting and an o

Generate API Documentation Using Swagger Module in NestJS

Swagger provides us a standard to generate API documentation based on the Open API specification. If we use NestJS for building our API providers, we can utilize a tool provided by NestJS in the  @nestjs/swagger  module to generate the documentation automatically in the built time. This module also requires the swagger-ui-express module if we use Express as the NestJS base HTTP handler. Set Swagger configuration First, we need to define Swagger options and instantiate the documentation provider on the main.ts file. import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger'; // sample application instance const app = await NestFactory.create(AppModule); // setup Swagger options const options = new DocumentBuilder() .setTitle('Coffee') .setVersion('1.0') .setDescription('Learn NestJS with coffee') .build(); // build the document const document = SwaggerModule.createDocument(app, options); // provide an endpoint