[TS] 데코레이터

단비·2023년 3월 7일
typescript
0

인강

목록 보기
6/15
  • 데코레이터

    • 함수이며, 클래스에만 사용(자바의 어노테이션처럼 @를 사용)

    • 런타임에 실행되어 인스턴스 코드가 없어도 실행됨

    • 클래스 데코레이터는 하나의 인자만 가질 수 있음

      function Controller(constructor: Function){
    console.log("InitClass : ", constructor)
}

function Get(params: any): any{
    console.log("[GET] ", params)
}

function Column(params: any): any{
    console.log("Column !!", params)
}

@Controller
class ExampleController {
    @Column("email")
    private _email: string;

    constructor(email: string) {
        this._email = email;
    }

    @Get("/api/v1/user")
    getReq(){}
}
  • 데코레이터 팩토리

    • 데코레이터 함수를 감싸는 래퍼 함수

    • 데코레이터 표현식은 위에서 아래로 평가(evaluate)된다.

      실행 결과는 아래에서 위로 함수를 호출(call)된다.

    • 데코레이터 팩토리를 사용하면 값을 전달할 수 있음

      팩토리: 사용자로부터 전달받은 인자를 사용

데코레이터 함수: 내부에서 반환되는 데코레이터로 사용
      // 데코레이터 팩토리
function Controller(constructor: any): any{
    console.log("InitClass : ", constructor)

		// 데코레이터 함수 
    return (
        constructor: Function,
        propertyKey: string,
        descriptor: PropertyDescriptor
    ) => {
        console.log(constructor)
    }
}

    • constructor: Function 또는 target: any

      • 현재 타겟

    • propertyKey: string

      • 속성 이름(method)

    • descriptor: PropertyDescriptor

      • 설명

    1. 런타임 시 실행되는 코드(호출 필요 없음)

      function Controller(constructor: any): any{
    console.log("InitClass : ", constructor)

    return (
        constructor: Function,
        propertyKey: string,
        descriptor: PropertyDescriptor
    ) => {
        console.log(constructor)
    }
}

function Get(params: any): any{
    console.log("[GET] ", params)
}

function Post(params: any): any{
    console.log("[POST] deco Factory: ", params)

    return (
        target: any,
        propertyKey: string,
        descriptor: PropertyDescriptor
    ) => {
        console.log("[POST] deco Func: ", target, propertyKey, descriptor)

        target.getReq();
        target[propertyKey]
    }
}

function Column(params: any): any{
    console.log("Column !!", params)
}

function UseGuard(): any{
    console.log("UseGuard Factory: ")

    return (
        constructor: Function,
        propertyKey: string,
        descriptor: PropertyDescriptor
    ) => {
        console.log("UseGuard deco Func: ", constructor, propertyKey, descriptor)
    }
}

@Controller("/api")
class ExampleController {
    @Column("email")
    private _email: string;

    constructor(email: string) {
        this._email = email;
    }

    @Get("/user")
    getReq(){
        console.log("getReq method process")
    }

    @Post("/board")
    @UseGuard()
    postReq() {
        console.log("postReq method process")
    }
}

    2. 런타임 시 실행이 안되는 코드(따로 호출해줘야 함)

      function Controller2(constructor: {new (email: string): any} ): any{
    return class extends constructor {
				// 따로 값을 지정해주지 않을 경우 받은 값으로 출력
        _email = "test2@test.com" 
        _name = "danbi"
        _age = 25
    }
}

function UseGuard2(): any{
    return (
        constructor: Function,
        propertyKey: string,
        descriptor: PropertyDescriptor
    ) => {
        console.log("UseGuard deco Func: ", constructor, propertyKey, descriptor)
    }
}

@Controller2
class ExampleController2 {
    private _email: string;

    constructor(email: string) {
        this._email = email;
    }

    @UseGuard2()
    get email(): string {
        return this._email
    }
}

console.log(new ExampleController2("test@test.com"))
profile
단비
tistory로 이전! https://sweet-rain-kim.tistory.com/
이전 포스트

[TS] key를 활용한 제네릭과 타입

다음 포스트

[TS] 타입 단언과 모듈

0개의 댓글