TypeScript(심화Ⅱ)

Decorators
클래스 선언, 메서드, 접근자, 프로퍼티 또는 매개 변수에 첨부할 수 있는 특수한 종류의 선언

• 데코레이터 함수에는 현재타겟, key(속성이름), 설명 전달
• 메소드나 클래스 인스턴스가 만들어지는 런타임에 실행(매번 실행 x)
• 메소드, 접근자 또는 프로퍼티 데코레이터가 다음에 오는 매개 변수 데코레이터는 각 인스턴스/정적 멤버에 적용
• 매개 변수 데코레이터는 생성자에 적용
• 클래스 데코레이터는 클래스에 적용됩니다.

✔️Decorator를 사용하기 위해 tsconfig.json 설정

		npm i reflect-metadata --dave
		yarn add reflect-metadata

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true,
      	"emitDecoratiorMetadata": true
    }
}

Decorator Factories
데코레이터 함수를 반환하는 함수

	고차함수=함수를 반환하는 함수
	팩토리= 어떤 인스턴스를 생성하여 반환하는 함수, 메서드

function color(value: string) { // 데코레이터 팩토리
    return function (target) { // 데코레이터
        // 'target'과 'value' 변수를 가지고 무언가를 수행
    }
}

• 데코레이터 함수는 특정 인자만 받음
• 데코레이터에 추가적인 인자를 주고 싶다면 구차 함수에 매개변수를 추가하여 데코레이터 함수 내부에서 사용 가능

Class Decorator
생성자 함수를 관찰, 수정, 오버라이딩(재정의) 가능

기존의 클래스의 코드를 변경하지 않고 property를 추가하거나 새성자 함수에서 기능을 추가 하고 싶을때 사용

• 클래스 데코레이터 특징
  - 클래스 선언 직전에 선언
  - 런타임 함수로서 호출
  - 생성자 함수에 적용
  - 클래스 데코레이터의 타겟 매개변수는 생성자 함수

(1) 값을 반환하지 않는 경우

        클래스의 기존 생성자 함수를 그대로 사용함

(2) 값을 반환하는 경우

	데코레이터가 값을 반환하면 그 반환값으로 생성자 함수를 교체함
    기존 생성자 함수에 기능을 확장하고 싶을때 
    class extends constructor와 같이 생성자 함수를 확장하여 반환

💥사용시 주의사항
-데코레이터로 class에 property를 추가해도 type system에서는 알지 못함 (데코레이터가 런타임에서 호출되기 때문)

-d.ts파일(타입 선언 파일), declare class 에서는 사용할 수 x