Decorator
타입스크립트의 데코레이터는 파이썬의 데코레이터와 마찬가지로 함수를 파라미터로 받는 함수를 쉽게 선언하는 방법입니다.
tsconfig.json 파일에서 experimentalDecorators 컴파일러 옵션을 활성화해야합니다.
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}Class Decorator
클래스 위에 데코레이터를 설정하면 데코레이터 함수에게 클래스 객체의 참조가 전달된다.
// Constructor Interface
interface PersonConstructor {
new(name: string): Person;
}
/**
* 파라미터 타입으로 Person을 사용하는 경우
* 다음과 같은 에러가 발생할 수 있다.
*
* 1. Cannot use 'new' with an expression
* whose type lacks a call or construct signature.
* 2. Argument of type 'typeof Person' is not assignable
* to parameter of type 'Person'.
* Property 'name' is missing in type 'typeof Person'.
* 3. Property 'prototype' does not exist on type 'Person'.
*
* 다음과 같이 처리하여 해결할 수 있다.
* 1. 파라미터 타입으로 any를 사용한다.
* 2. 파라미터 타입으로 인터페이스 PersonConstructor를 사용한다.
*/
function Hello(construct: PersonConstructor) {
construct.prototype.say = function() {
console.log(`Hello ${this.name}`);
}
}
@Hello
class Person {
constructor(private name: string = 'Anonymous') {
this.name = name;
}
}
let p = new Person('Tom');
(<any>p).say(); // Hello Tom함수를 중첩해서 정의하면 데코레이터 사용 시 파라미터를 추가로 받을 수 있습니다.
(function() {
function Component(param: any) {
return function(constructor: any) {
return class extends constructor {
constructor() {
super();
this.name = param.name;
}
}
}
}
@Component({
name: 'Tom'
})
class Person {
}
let p = new Person();
console.log(p); // class_1 { name: 'Tom' }
}());앵귤러는 적극적으로 데코레이터를 받아들여서 앵귤러의 구성 요소를 선언할 때 데코레이터에게 설정정보를 가진 객체를 전달하면 앵귤러 프레임워크가 클래스를 직접 객체로 생성하고 객체가 기본적으로 앵귤러의 구성요소로써의 역할을 수행할 수 있도록 조작합니다.
Method Decorator
(function() {
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(target);
// P { foo: [Function] }
console.log(`${propertyKey}() was called!`);
// foo() was called!
console.log(descriptor);
// {
// value: [Function],
// writable: true,
// enumerable: true,
// configurable: true
// }
}
class P {
@log
foo() {
}
}
const p = new P();
p.foo();
})();메소드 위에 @log 데코레이터를 설정하면 해당 메소드가 호출될 때 마다 로그가 출력됩니다. 다음 예제를 보시면 어떻게 기능을 추가할 수 있는지 힌트를 얻게 됩니다.
(function() {
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const method = descriptor.value;
// 타겟 객체의 메소드를 포장한 새 함수를 설치한다.
descriptor.value = function() {
// arguments: 타겟객체의 메소드가 받아야 할 파라미터를 대신 받는다.
console.log(`${propertyKey}() was called. arguments:`, arguments);
// 타겟 객체의 메소드에게 파라미터를 전달하면서 호출한다.
var result = method.apply(this, arguments);
// 타겟 객체의 메소드가 리턴 값을 받아서 재 리턴한다.
return result;
};
}
class P {
@log
foo(a: string, b: string) {
console.log(`Do something`);
}
}
const p = new P();
p.foo('Hello', 'World');
// foo() was called. arguments: { '0': 'Hello', '1': 'World' }
// Do something
})();데코레이터는 프로퍼티나 파라미터에도 적용할 수 있습니다. 이에 대한 부분은 생략하오니 관심이 있는 분은 다음 사이트를 참고하시기 바랍니다.
https://www.typescriptlang.org/docs/handbook/decorators.html
