Decorator에 대한 기초와 활용 – 1

tsc --target ES5 --experimentalDecorators

//tsconfig.json
{
	"compilerOptions": {
		"target": "ES5",
		"experimentalDecorators"; true
	}
}

function exampleDecorator(target) {
	console.log("Decorator example");
}

class Test {
	@exampleDecorator()
	test() {
		console.log("Test class에 test method 입니다.");
	}
}

const t = new Test();
t.test();

Decorator example
Test class에 test method 입니다.

function factory(value: string) {
	console.log('데코레이터 팩토리');
	
	return function () {
		console.log(value);
	};
}

class Test {
	@factory('Hi')
	test() {
		console.log('test 함수 입니다.');
	}
}

const t = new Test();
t.test();

데코레이터 팩토리
Hi
test 함수수입니다.

function first() {
  console.log("first(): factory evaluated");
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("first(): called");
  };
}
 
function second() {
  console.log("second(): factory evaluated");
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("second(): called");
  };
}
 
class ExampleClass {
  @first()
  @second()
  method() {}
}

first(): factory evaluated
second(): factory evaluated
second(): called
first(): called

@sealed
class BugReport {
  type = "report";
  title: string;
 
  constructor(t: string) {
    this.title = t;
  }
}

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

// 데코레이터 팩토리
function classDecorator(param1: string, param2: string) {
  // 데코레이터 함수
  return function <T extends { new (...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
      new_prop = param1;
      first_prop = param2;
    };
  };
}

@classDecorator('안녕하세요', '반갑습니다')
class Test {
  first_prop: string;

  constructor(m: string) {
    this.first_prop = m;
  }
}

let t = new Test('world');
console.log(t);
console.log(t.first_prop);

Test { 
    first_prop: '반갑습니다', 
    new_prop: '안녕하세요' 
}
반갑습니다.

function methodDecorator() {
  return function (target: any, property: string, descriptor: PropertyDescriptor) {

    // descriptor.value는 test() 함수 자체를 가리킨다. 이 함수를 잠시 변수에 피신 시킨다.
    let originMethod = descriptor.value; 

    // 그리고 기존의 test() 함수의 내용을 다음과 같이 바꾼다.
    descriptor.value = function (...args: any) {
      console.log('before');
      originMethod.apply(this, args); // 위에서 변수에 피신한 함수를 call, apply, bind 를 통해 호출
      console.log('after');
    };
  };
}

class Test {
  property = 'property';
  hello: string;

  constructor(m: string) {
    this.hello = m;
  }

  @methodDecorator()
  test() {
    console.log('test');
  }
}

let test = new Test("world")
test.test()

[LOG]: "before" 
[LOG]: "test" 
[LOG]: "after"

class Point {
  private _x: number;
  private _y: number;
  constructor(x: number, y: number) {
    this._x = x;
    this._y = y;
  }
 
  @configurable(false)
  get x() {
    return this._x;
  }
 
  @configurable(false)
  get y() {
    return this._y;
  }
}

function configurable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.configurable = value;
  };
}

const p = new Point(10, 20);
delete p.x; // The operand of a 'delete' operator cannot be a read-only property.
console.log(p.x);

import "reflect-metadata";
const formatMetadataKey = Symbol("format");
function format(formatString: string) {
  return Reflect.metadata(formatMetadataKey, formatString);
}
function getFormat(target: any, propertyKey: string) {
  return Reflect.getMetadata(formatMetadataKey, target, propertyKey);
}

class Greeter {
  @format("Hello, %s")
  greeting: string;
  
  constructor(message: string) {
    this.greeting = message;
  }
  
  greet() {
    let formatString = getFormat(this, "greeting");
    return formatString.replace("%s", this.greeting);
  }
}

const g = new Greeter('Greeter is good!');
console.log(g.greet());

[LOG]: "Hello, Greeter is good!"

function SetDefaultValue(numberA: number, numberB: number) {
  return (target: any, propertyKey: string) => {
    const addNumber = numberA * numberB;
    let value = 0;

    // 데코레이터가 장식된 DataDefaultType의 num 이라는 프로퍼티의 객체 getter / setter 설정을 추가한다.
    Object.defineProperty(target, propertyKey, {
      get() {
        return value + addNumber; // 조회 할때는 더하기 시킴
      },
      set(newValue: any) {
        value = newValue - 30; // 설정 할때는 30을 뺌
      },
    });
  };
}

class DataDefaultType {
  @SetDefaultValue(10, 20)
  num: number = 0;
}

const test = new DataDefaultType();

test.num = 30;
console.log(`num is 30, 결과 : ${test.num}`);

test.num = 130;
console.log(`num is 130, 결과 : ${test.num}`);

test.num = 20;
console.log(test.num);

[LOG]: "num is 30, 결과 : 200" 
[LOG]: "num is 130, 결과 : 300" 
[LOG]: 190

// 매개 변수 데코레이터 함수
// target 클래스의 validators 속성에 유효성을 검사하는 함수 할당
function MinLength(min: number) {
  return function(target: any, propertyKey: string, parameterIndex: number) {
    target.validators = {
      minLength: function(args: string[]) {
        return args[parameterIndex].length >= min;
      }
    }
  }
}

// 메서드 데코레이터 함수
function Validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const method = descriptor.value;
  
  // 설명자의 value에 유효성 검사 로직이 추가된 함수를 할당
  descriptor.value = function(...args) {
    // target에 저장해둔 validators를 모두 수행한다. 이때 원래 메서드에 전달된 인수들을 각 validator에 전달한다.
    Object.keys(target.validators).forEach(key => {
      if (!target.validators[key](args)) {
        throw new Error();
      }
    })
    // 기존 함수를 실행
    method.apply(this, args);
  }
}

class User {
  private name: string;
  
  @Validate
  setName(@MinLength(3) name: string) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

const t = new User();
t.setName('hello');
console.log(t.getName());
console.log('---------------');
t.setName('hi');
console.log(t.getName());
console.log('---------------');

[LOG]: "hello" 
[LOG]: "---------------" 
[ERR]: "Executed JavaScript Failed:" 
[ERR]: Error: {}