TS 에서 Decorator 사용하기

개요

NestJS를 처음 사용해보면서 decorator라는 개념을 처음 알았다

다른 많은 언어에서도 (Phython, java…) 사용이 가능한데 Typescript에서도 사용이 가능하다

(javascript는 안됨)


@ClassDecorator
class Test {
	@PropertyDecorator
	testProperty : any = null
	
	@accessorDecorator
	get testAccessor(): any {
		return this.testProperty
	}
	
	@methodDecorator
	testMethod(@parameterDecorator ) : any {
		
	}
}

위와 같이 “@ “가 앞에 붙어 class , property, method 의 위에 붙어있는게 decorator 라는 함수이다

💡

종류별로 다섯개의 decorator를 알아보자

@ClassDecorator

@PropertyDecorator

@accessorDecorator

@methodDecorator

@parameterDecorator

Decorator 활성화

experimentaDecorators 키를 true 로 설정하자


{
  "compilerOptions": {
		...
    "experimentalDecorators": true,
		...
	}
}

Class Decorator


@ClassDecorator
class Test{

}

function ClassDecorator(constructor : Test){
  console.log('Class Decorator',constructor)
}
// result
// Class Decorator [class Test]

첫번째 Class Decorator를 알아보자 함수 생성수 “@”를 붙여 Class위에 사용하면 첫번째 파라메터로 생성자를 받을 수 있다

해당 생성자를 통해 method, class 등에 접근이 가능하나 instance 생성되기전에 실행되기에 property만 접근이 제한된다

Method Decorator

@IsAmount 라는 decorator를 만들것인데 BigInt 로 비교하여 0보다 작으면 Exception 할것이다

Property Decorator

선언


export const IsAmount = (target:any, key : string, desc: PropertyDescriptor) => {
	console.log('IsAmount',target, key, desc)
}

참고문헌

데코레이터

https://yamoo9.gitbook.io/typescript/decorator