[TypeScript] Dynamically initialize class properties using TypeScript decorators

Posted 2021-02-06 answer1215

Decorators are a powerful feature of TypeScript that allow for efficient and readable abstractions when used correctly. In this lesson we will look at how we can use decorators to initialize properties of a class to promises that will make GET requests to certain URLs. We will also look at chaining multiple decorators to create powerful and versatile abstractions.

 

function Get(url) { 
    return function (target: any, name: string) {
        // For future chain or cache on the same ‘name‘
        const hiddenInstanceKey = "_$$" + name + "$$_";
        const init = () => {
            return fetch(url).then(response => response.json()); 
        };
    
        Object.defineProperty(target, name, {
            get: function () {
                return init();
            },
            configurable: true
        });
    }
}

function First(num) {
    return function(target: any, name: string) {
        const hiddenInstanceKey = "_$$" + name + "$$_";
        // access prvious getter on ‘name‘
        const prevInit = Object.getOwnPropertyDescriptor(target, name).get;
        const init = () => {
        return prevInit()
            .then(response => (response as any[]).slice(0, num)); 
        };

        Object.defineProperty(target, name, {
            get: function() {
                return this[hiddenInstanceKey] || (this[hiddenInstanceKey] = init());
            },
            configurable: true
        });
    }
}

class TodoService {
  // Decorators runs from bottom to top
  @First(3)
  @Get(‘https://jsonplaceholder.typicode.com/todos‘)
  todos: Promise<any[]>;
}

const todoService = new TodoService();
todoService.todos.then(todos => {
  console.log(todos);
})