-
Typescript - DecoratorsTypeScript 2022. 9. 20. 10:52
- 데코레이터는 메타 프로그래밍하는 데 매우 유용하게 사용될 수 있다.
function Logger(constructor: Function) { console.log('Logging...'); console.log(constructor); } @Logger class Person { name = 'Max'; constructor() { console.log('Creating person object...'); } }
- 데코레이터는 실체화되기 전 클래스가 정의만 돼도 실행된다. 클래스를 실체화할 필요가 없다
데코레이터 팩토리
: 데코레이터 함수를 도출하는데 어떤 대상에 데코레이터를 할당할 때 설정할 수 있도록 해준다.
// EX1 function Logger(logString: string) { return function(constructor: Function){ console.log(logString); console.log(constructor); } } @Logger('LOGGING - PERSON') class Person { ... }
- 팩토리 함수와 함께 실행된다면 데코레이션 함수가 사용하는 값을 커스터마이즈할 수 있다.
- 데이코레이터 팩토리를 사용하면, 데코레이터를 내부에 설정에 사용할 때보다 많은 영향력과 가능성을 펼칠 수 있다.
// EX2 function WithTemplate(template: string, hookId: string){ return function(_: Function){ const hookEl = document.getElementById(hookId); if(hookEl){ hookEl.innerHTML = template; } } } @WithTemplate('<h1>My Person Object</h1>','app') class Person {...}
* _ : 타입스크립트에 시그널이 되는 _ , 인수가 있지만 필요없다.
프로퍼티 데코레이터
function Log(target: any, propertyName: string | Symbol) { console.log('Property decorator!'); console.log(target, propertyName); } class Product { @Log title: string; ... }
- 첫 인수 : 프로퍼티의 타깃, 만들어진 오브젝트의 프로토타입
- 두번째 인수 : 프로퍼티 이름
'TypeScript' 카테고리의 다른 글
Typescript - 고급타입 (0) 2022.09.16 Typescript - 클래스 & 인터페이스 (0) 2022.09.15 Typescript - 컴파일러( 및 구성 ) (0) 2022.09.14 Typescript - 시작 (0) 2022.09.13