2017년 11월 26일

10/ Decorator

타입스크립트 정리 글은 이웅재님의 강의 와 강의록 을 참고하여 작성하였습니다. (짱짱) 오류가 있다면 언제든지 댓글 부탁드립니다.

요약 아직 잘 이해가 안간다. 😵

1. Decorator 종류

Class Decorator
Method Decorator
Property Decorator
Parameter Decorator

각자 Decorator의 시그니처가 다르다.

Decorator?

함수 표현식에 해당한다.
@와 같이 써서 표현식 뒤에 오는 대상에 더욱 기능적으로 추가하거나 하는 일들을 할 수 있다.
함수를 선언한 뒤 @키워드를 이용해 선언된 함수를 Decorator로 사용할 수 있다.

1-1. Decorator 코드 작성 준비

yarn add typeScript -D여기서 D는 dev와 같은 명령어다.

2. Decorator

2-1. Class Decorator

2-1-1. Class Decorator Basic

여기서 helloFactory 는 팩토리 패턴


function hello(constructorFn: Function) {
  console.log(constructorFn);
}
 
function helloFactory(show: boolean) {
  if (show) {
    return hello;
  } else {
    return null;
  }
}
 
// @hello
@helloFactory(true)
class Person {
  constructor() {
    console.log('new Person()');
  }
}
 
new Person();

2-1-2. Class Decorator Advanced


function addHello(constructorFn: Function) {
  constructorFn.prototype.hello = function () {
    console.log('hello');
  };
}
 
@addHello
class Person {
  constructor() {
    console.log('new Person()');
  }
}
 
const person = new Person();
(<any>person).hello();

2-2. Method Decorator


function editable(canBeEdit: boolean) {
  return function (target: any, propName: string, description: PropertyDescriptor) {
    console.log(canBeEdit);
    console.log(target);
    console.log(propName);
    console.log(description);
    description.writable = canBeEdit;
  };
}
 
class Person {
  constructor() {
    console.log('new Person()');
  }
 
  @editable(true)
  hello() {
    console.log('hello');
  }
}
 
const person = new Person();
person.hello();
person.hello = function () {
  console.log('world');
};
person.hello();

2-3. Property Decorator


function writable(canBeWrite: boolean) {
  return function (target: any, propName: string): any {
    console.log(canBeWrite);
    console.log(target);
    console.log(propName);
    return {
      writable: canBeWrite,
    };
  };
}
 
class Person {
  @writable(false)
  name: string = 'Mark';
 
  constructor() {
    console.log('new Person()');
  }
}
 
const person = new Person();
console.log(person.name);
 
/*
 
undefined
 
*/

2-4. Prameter Decorator


function printInfo(target: any, methodName: string, paramIndex: number) {
    console.log(target);
    console.log(methodName);
    console.log(paramIndex);
}
 
class Person {
    private _name: string;
    private _age: number;
 
    constructor(name: string, @printInfo age: number) {
        this._name = name;
        this._age = age;
    }
 
    hello(@printInfo message: string) {
        console.log(message);
    }
}
 
/*
 
Person { hello: [Function] }
hello
0
[Function: Person]
undefined
1