25 (2/2) :: TypeScript 데코레이터

엘리스 SW 엔지니어 트랙 25일차

송현지 강사님 온라인 강의날

 

 

데코레이터

함수를 감싸는 함수

런타임에 호출

 

아직 표준이 안된 함수라

Decorator 사용하려면

자바스크립트 Babel,

타입스크립트 "experimentalDecorators": true

해줘야된다

 

데코레이터가 있는 선언에 대해

특정 타입의 메타데이터 내보내려면

reflect-metadata 설치

npm i reflect-metadata --save
yarn add reflect-metadata

 

데코레이터전에 알아야할 JavaScript

일급객체: 값으로 사용가능

클로저: 내부 변수 끝나도 사용가능, 내부 변수를 누군가 가리키고 있으면 가비지 콜렉터가 없애지 않는다

고차 함수(함수 반환하는 함수)

Property Descriptor

 

 

 

Decorator Factory

데코레이터 함수를 반환하는 녀석

 

데코레이터 함수 예시

// 데코레이터 팩토리 

function decoratorFactory(value: string) {

    // 데코레이터 함수 리턴
    return function(
    
        // 매개변수 3가지
        target:any,
        propertKey: string,
        propertyDescriptor:PropertyDescriptor) {
        
        // 데코레이터 팩토리 매개변수 value 출력
        console.log(value)
    }
}

class ExampleClass {
  @decoratorFactory("룰루랄라 퇴근이다")
  static method() {}
}

ExampleClass.method();

 

 

Class Decorator(클래스 데코레이터)

생성자 함수에 적용되는 데코레이터

생성자 함수 기능 확장 또는 프로퍼티 추가할 때 사용한다

 

클래스 선언직전에 선언

생성자 함수에 적용

매개변수는 생성자함수

 

특징

• 생성자 함수가 유일한 매개변수
• 기존 생성자 함수 지키면서 프로퍼티 추가하고 싶으면
  class extends <데코레이터함수 매개변수 이름>
• 클래스 데코레이터에서 새로 추가한 프로퍼티는
  타입스크립트에서 알 수 없다
  // @ts-ignore 하면 타입스크립트가 무시

 

 

Method Decorator

메서드 관찰, 수정, 오버라이딩

실무에선

로깅, 타이머(performance), permission guard 등 사용

 

메서드 property descriptor에 적용

세 가지 인자 받는다

 

 

Accessor Decorator

접근자(getter, setter) 관찰, 수정, 오버라이딩

매개변수는 메서드 데코레이터와 같다

 

 

Property Decorator

클래스의 프로퍼티 관찰, 수정, 오버라이딩

target, propertyKey 두 가지 인자 받는다

 

 

Parametor Decorator

메서드에서 선언되었다는 것만 관찰가능

그 이상은

reflect-metadata 라이브러리 사용

 

 

데코레이터의 동작

데코레이터 합성

여러 개 데코레이터를 한번에 쓰는 것

여러 개 쓰면 아래 부터 실행

    @log()
    @timer()

 

 

하나도 모르겠다

필요해지면 찾아보자