Giter Club home page Giter Club logo

decorator-examples's Introduction

Decorator Examples

This repo will help you understand decorator's and give you a good starting point for creating your own decorators.

Check out the directory /src for useful information and examples of each type of decorator.

Big thanks to this codeburst article.

Class decorator

Class decorator

  • Allows you to override the constructor of a class

Method decorator

Method decorator

  • Allows you to override a method's funciton
  • Execute code before or after it runs

Property decorator

Property decorator

Decorator starting templates

Class decorator

export function classDecorator(options: any) {
  return (target: Function) => {
    // save a reference to the original constructor
    const original = target;
  
    // a utility function to generate instances of a class
    function construct(constructor, args) {
      const c: any = function () {
        return constructor.apply(this, args);
      }
      c.prototype = constructor.prototype;
      return new c();
    }
  
    // the new constructor behaviour
    const f: any = function (...args) {
      console.log(`New: ${original['name']} is created`);
      return construct(original, args);
    }
  
    // copy prototype so intanceof operator still works
    f.prototype = original.prototype;
  
    // return new constructor (will override original)
    return f;
  };
};

Method decorator

Important:

Remember that the method decorator changes the original function definition on the prototype, and that the class property will be shared across all instances. If you need to access the instance of the class, use the this keyword in the function you used to override the orignal descriptor.value function.

export function methodDecorator(options: any) {
  return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
    // keep a reference to the original method
    const originalMethod = descriptor.value;

    // set the method to our new method that will get fired
    descriptor.value = function() {
      // this - refers to the instance of the class

      const args: any = arguments;

      // fire our original method and get the result
      const result = originalMethod.apply(this, args);

      // return our original method result
      return result;
    };
  };
};

Property Decorator

export function propertyDecorator(options: any) {
  return (target: Object, propertyName: string) => {
    // our property value
    let _val = target[propertyName];

    // our property get method
    const getter = function(this: any) {
      return _val;
    };

    // our property set method
    const setter = function(this: any, newVal) {
      _val = newVal;
    };

    // delete the property and re-assign it
    if (delete target[propertyName]) {
      Object.defineProperty(target, propertyName, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true
      });
    }
  };
};

decorator-examples's People

Contributors

nathan-andosen avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.