[TypeScript] Dynamically initialize class properties using TypeScript decorators

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(, num));

        };

        Object.defineProperty(target, name, {

            get: function() {

                return this[hiddenInstanceKey] || (this[hiddenInstanceKey] = init());

            },

            configurable: true

        });

    }

}

class TodoService {

  // Decorators runs from bottom to top

  @First()

  @Get('https://jsonplaceholder.typicode.com/todos')

  todos: Promise<any[]>;

}

const todoService = new TodoService();

todoService.todos.then(todos => {

  console.log(todos);

})

巴特西

[TypeScript] Dynamically initialize class properties using TypeScript decorators

最新文章

热门文章