[TS] Decorators 2️⃣

🍒 [230322 TIL] Understanding TypeScript

Decorators 2️⃣

Decorator the synthetic sugar

클래스 데코레이터는 constructor를 반환하면서 기존 constructor를 확장할 수 있다.

constructor를 확장할 때 super();는 기존 클래스 확장에서와 마찬가지로 기존 클래스의 정보를 기억하고 싶을 때 사용하면 된다.

function ClassDeco() {
    return function<T extneds {new(...args: any[]): {name: string}}>(target: T) {
        return class extends target {
            constructor(..._: any[]) {
                super(); // not necessary
                /* write your code */
            }
        }
    }
}

@ClassDeco
class Person {
    name = 'Shou';
    
    get name() {
        return this.name;
    }
    
    constructor() {
        console.log('Creating person object...');
    }
    
    getName(intro: string) {
        console.log(intro, this.name);
    }
}

데코레이터는 클래스를 정의할 때 실행되지만,
데코레이터를 통해 클래스를 확장하게 되면 확장된 클래스는 새로운 인스턴스를 만들었을 때 작동한다.

 

액세서 데코레이터, 메소드 데코레이터는 descriptor를 반환하면서 descriptor의 속성을 조정할 수 있다.

function AccessorDeco(
    target: any,
    propertyKey: string | Symbol,
    descriptor: PropertyDescriptor
): ProretyDescriptor {
    return {configurable: false};
}

function MethodDeco(
    target: any,
    propertyKey: string | Symbol,
    descriptor: PropertyDescriptor
): PropertyDescriptor {
    return {enumerable: true};
}

class Person {
    name = 'Shou';
    
    @AccessorDeco
    get name() {
        return this.name;
    }
    
    constructor() {
        console.log('Creating person object...');
    }
    
    @MethodDeco
    getName(intro: string) {
        console.log(intro, this.name);
    }
}

 

Autobind decorator

메소드 데코레이터 예시

class Printer {
    message = 'This works!';
    
    showMessage() {
        console.log(this.message);
    }
}

const printer = new Printer();

const button = document.querySelector('button');
button.addEventListener('click', printer.showMessage);
// undefined

위 코드에서 버튼을 클릭했을 때, This works!가 아니라 undefined가 출력된다.

클릭 이벤트 리스너를 사용할 때 지정한 함수가 실행되는데,

그 함수 안에 있는 this가 printer.showMessage()를 직접 호출했을 때의 this와 다르기 때문이다.

printer.showMessage()에서의 this는 Printer 클래스를 참조하지만
button.addEventListner('click', printer.showMessage)에서의 this는 이벤트 대상인 버튼을 참조한다.
addEventListener가 this를 이벤트의 대상과 바인딩하기 때문에!

button.addEventListener('click', printer.showMessage.bind(printer));
// This works!

이 경우 위와 같이 코드를 수정하면 This works!가 출력되지만 이를 데코레이터를 이용해 this가 자동으로 바인딩되게 만들 수 있다.

 

function Autobind(
    _: any,
    _2: string,
    descriptor: PropertyDescriptor
) {
    const original = descriptor.value;
    const adjusted: PropertyDescriptor = {
        configurable: true,
        enumerable: false,
        /* 사용자가 이 프로퍼티에 접근 시도할 때 프로퍼티의 값이나 함수가 직접 실행되지 않게 하기 위함 */
        get() {
            const bound = original.bind(this);
            return bound;
        }
    };
    return adjusted;
}

class Printer {
    message = 'This works!';
    
    @Autobind
    showMessage() {
        console.log(this.message);
    }
}

const button = document.querySelector('button');
button.addEventListener('click', printer.showMessage);
// This works!

getter는 실행되고 있는 함수, 그것이 속한 객체를 참조하기 때문에

getter에서 bind한 this는 원래 정의한 메소드에 있는 객체를 참조한다.

 

그러므로 Autobind 데코레이터를 showMessage 메소드에 장식하면

이벤트 리스너에서 bind를 지정하지 않아도 자동으로 Printer 클래스의 message를 bind한다!