Skip to content

decorators

Justin Lazaro edited this page Dec 31, 2018 · 1 revision
function logged(consturtorFn: Function) {
  console.log(consturtorFn);
}

@logged
class Person {
  constructor() {
    console.log('Hi!');
  }
}

// Factory
function logging(value: boolean) {
  return value ? logged : null;
}
@logging(false)
class Car {}

// Adavanced
function printable(constructorFn: Function) {
  constructorFn.prototype.print = function() {
    console.log(this);
  };
}

// multitple decoration
@logging(false)
@printable
class Plant {
  name = 'Green Plant';
}
const plant = new Plant();
(<any>plant).print();

// Method Decorators
// Property Decorator
function editable(value: boolean) {
  return function(
    target: any,
    propName: string,
    description: PropertyDescriptor,
  ) {
    description.writable = value;
  };
}

function overwritable(value: boolean) {
  return function(target: any, propName: string): any {
    const newDescriptor: PropertyDescriptor = {
      writable: value,
    };

    return newDescriptor;
  };
}

class Project {
  @overwritable(false)
  projectName: string;
  constructor(name: string) {
    this.projectName = name;
  }

  @editable(false)
  calcBudget() {
    console.log(1000);
  }
}

const project = new Project('Super Project');
project.calcBudget();
project.calcBudget = function() {
  console.log(2000);
};
project.calcBudget();

// Parameter
function printInfo(target: any, methodName: string, paramIndex: number) {
  console.log('Target', target);
  console.log('methodName', methodName);
  console.log('paramIndex', paramIndex);
}
class Course {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  printStudentNumbers(mode: string, @printInfo printAll: boolean) {
    if (printAll) {
      console.log(1000);
    } else {
      console.log(2000);
    }
  }
}

const course = new Course('Super Course');
course.printStudentNumbers('anything', true);
course.printStudentNumbers('anything', false);

Clone this wiki locally