__decorator

dist 파일에 __decorator

😀 js로 변환된 파일에 데코레이터가 어떻게 반영되고 실행되는 지 살펴보자

데코레이터가 활용되고 있는 파일에는 위 이미지와 같이 __decorate 함수가 선언되어 있는 것을 볼 수 있다.

__decorate 함수를 살펴보자!

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length;
    var r = c < 3 ? target : (desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc)
    var d;
  
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") {
        r = Reflect.decorate(decorators, target, key, desc);
    } else {
        for (var i = decorators.length - 1; i >= 0; i--) {
            if (d = decorators[i]) {
                r = (c < 3 ? d(r) : (c > 3 ? d(target, key, r) : d(target, key))) || r;
            }
        }
    }
  
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};

function(decorators, target, key, desc)

    var c = arguments.length;
	// 매개 변수의 개수가 3개 미만이면 Class Decorator이다.
	// desc는 객체 속성 설명자가 들어가게 된다.
    var r = c < 3 ? target : (desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc)
    var d;

1. decorators(필수)
   • 데코레이션된 함수 배열
2. target(필수)
   • 타겟 Class
3. key(옵션)
   • 타겟의 속성
4. desc(옵션)
   • 타겟 속성 설명자
     MDN Object.getOwnPropertyDescriptor()

if (typeof Reflect === "object" && typeof Reflect.decorate === "function") {}

typeof Reflect.decorate === "function" 조건은 reflect-metadata를 사용하고 있는 지를 확인하는 코드이다.

✅ 만약 decorate 함수가 없다면 반목문을 통해 데코레이터된 함수를 실행하며, 그렇지 않으면 Reflect-Metadata의 추상화된 decorate 함수를 활용해 데코레이팅 된 함수를 실행시키는 것이다!

if (typeof Reflect === "object" && typeof Reflect.decorate === "function") {}
// decorate 함수가 없으면 ~
else {
        for (var i = decorators.length - 1; i >= 0; i--) {
            if (d = decorators[i]) {
                r = (c < 3 ? d(r) : (c > 3 ? d(target, key, r) : d(target, key))) || r;
            }
        }
    }

return c > 3 && r && Object.defineProperty(target, key, r), r;

var r = c < 3 ? target 
	: (desc === null ? 
       desc = Object.getOwnPropertyDescriptor(target, key) : desc)

반환값은 데코레이터가 적용된 r 을 반환해 준다.
매개변수 개수가 3개 미만이라면 target 클래스 그렇지 않으면 데코레이션이 적용된 속성 설명자가 반환된다.