this를 반환 타입으로 사용하기

this를 반환 타입으로 사용하기

this를 값뿐 아니라 타입으로도 사용할 수 있습니다.

 

클래스를 정의할 때라면 메서드의 반환 타입을 지정할 때 this 타입을 유용하게 활용할 수 있습니다.

 

예를 들어 ES6의 Set 자료구조를 두 가지 연산만 지원하도록 간단히 구현해 보겠습니다.

 

이 자료구조는 아래처럼 사용할 수 있습니다.

// tslint:disable-next-line: new-parens
let set = new Set
set.add(1).add(2).add(3)
set.has(3) // true
set.has(4) // false

Set 클래스의 has 메서드부터 정의합니다.

class Set{
    has(value: number): boolean {
        // ...
    }
}

add를 호출하면 Set 인스턴스를 반환해야 하므로 다음과 같이 정의할 수 있습니다.

class Set{
    has(value: number): boolean {
        // ...
    }
    add(value: number):Set {

    }
}

이전엔 Set을 상속받는 서브 클래스를 만들어보겠습니다.

class MutableSet extends Set {
    delete(value: number): boolean {
        // ...
    }
}

Set의 add 메서드는 여전히 Set을 반환하므로 서브클래스에선 MutableSet을 반환하도록 오버라이드합니다.

class MutableSet extends Set {
    delete(value: number): boolean {
        // ...
    }
    add(value: number): MutableSet {
        // ...
    }
}

클래스를 상속받는 서브 클래스가 해야 하는 귀찮은 작업이 생겼습니다. 즉, 서브 클래스는 this를 반환하는 모든 메서드의 시그니처를 오버라이드해야 합니다.

 

타입 확인자를 만족시킬 수 있도록 이런 메서드 각각을 이처럼 오버라이드해야 한다면 클래스를 상속받는 게 의미가 없습니다.

 

아래처럼 반환 타입을 this로 지정하면 이 작업을 TypeScript가 알아서 해줍니다.

class Set{
    has(value: number): boolean {
        // ...
    }
    add(value: number):this {

    }
}

이제 Set의 this는 Set 인스턴스를, MutableSet의 this는 MutableSet 인스턴스를 자동으로 가리키므로 MutableSet에서 add 메서드를 오버라이드할 필요가 없습니다.

class MutableSet extends Set {
    delete(value: number): boolean {
        // ...
    }
}