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);
})