Frontend/TypeScript

TypeScript super vs this & setter/getter

ej503 2023. 1. 16. 19:34

super과 this에는 어떠한 차이점이 있을까요?

 

1.  this

a) 현재 class를 가리키는 reference 변수이다.

b) 현재 class와 부모 class의 method에 접근할 수 있다. (*private method 제외)

 

2. super

a) 부모 class를 가리키는 reference 변수이다.

b) public 혹은 protected로 상속받은 method만 접근 가능하다. 그렇기에 getter/setter을 통해 속성을 제어해야 한다.

 

또한 super은 자식 class와 부모 class를 구별하기 위해 사용되며 오버라이딩을 하기 유용하다는 장점이 있다.

 

/**
 * Parent class
 */
class BookClub {
    constructor(public monthlyBook: string ) { this.monthlyBook = "기억의 뇌과학"; }

    Read() {
        console.log("이번 달 북클럽 책을 읽으셨네요!");
    }
    
    //setter
    set monthlyBookName (value: string) { this.monthlyBook = value; }
    //getter
    get monthlyBookName() { return this.monthlyBook; }
}

/**
 * Child class
 */
class BookClubChild extends BookClub {
    constructor() {
        super("기억의 뇌과학");
    }

    public info () {
    	// getter 사용
        console.log("이번 달의 추천 도서는 " + super.monthlyBookName + " 입니다");
        // setter 사용
        super.monthlyBookName = "나의 라임 오렌지나무";
        // getter 사용
        console.log("이번 달의 추천 도서는 " + super.monthlyBookName + " 입니다");
    }
}

let subBookClub = new BookClubChild();
// child method 
subBookClub.info();