10/ Decorator

10/ Decorator

목차

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

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


1. Decorator 종류

  • Class Decorator
  • Method Decorator
  • Property Decorator
  • Parameter Decorator

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

Decorator?

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

1-1. Decorator 코드 작성 준비

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


2. Decorator

2-1. Class Decorator

2-1-1. Class Decorator Basic

여기서 helloFactory 는 팩토리 패턴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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

참고링크

  1. http://poiemaweb.com/es6-class
  2. https://javarouka.github.io/blog/2016/09/30/decorator-exploring/
  3. http://blog-kr.zoyi.co/channel-frontend-decorator/
📚