[typescript] class - 접근제한자, 추상클래스/추상메서드(abstract)

접근 제한자(access modifier) - public, private, protected

기존 es6에서는 접근제한자를 지원하지 않았지만 타입스크립트는 지원한다.

 

class Car{
    name:string = 'car';
    color: string;
    constructor(color:string){
        this.color = color;
    }
    start(){
        console.log('start');
    }
}

class Bmw extends Car {
    constructor(color:string){
        super(color);
    }
    showName(){
        console.log(super.name)
    }
}
const z4 = new Bmw('black');
console.log(z4.name);

public : 자식 클래스, 클래스 인스턴스 모두 접근 가능

• 2번째 줄에 name:string = 'car';는 public name:string = 'car'; 와 동일하다.

 

private(#) : 해당 클래스 내부에서만 접근가능 (자식, 인스턴스 모두 접근 불가)

• private name:string = 'car'; 와 #name:string = 'car';
• Property '#name' is not accessible outside class 'Car' because it has a private identifier.
• 자식요소에 사용시 에러를 낸다

 

protected : 자식 class에서 접근 가능하나 class instance로는 존재 할 수 없다.

• protected name:string = 'car';
• Property 'name' is protected and only accessible within class 'Car' and its subclasses.

 

readonly : 읽기전용프로퍼티로 수정이 불가하다.

• readonly name:string = 'car';
• 직접 변경은 안되나 constructor내부에 매개변수를 줘서 받아 오는 것은 가능하다.
• Cannot assign to 'name' because it is a read-only property.

// before
class Car{
    readonly name:string = 'car';
    color: string;
    constructor(color:string){
        this.color = color;
    }
    start(){
        console.log('start');
        console.log(this.name);
    }
}

class Bmw extends Car {
    constructor(color:string){
        super(color);
    }
    showName(){
        console.log(super.name)
    }
}
const z4 = new Bmw('black');
console.log(z4.name);
z4.name = 'zzzz';

// after
class Car{
    readonly name:string = 'car';
    color: string;
    constructor(color:string, name:string){
        this.color = color;
        this.name = name;
    }
    start(){
        console.log('start');
        console.log(this.name);
    }
}

class Bmw extends Car {
    constructor(color:string, name:string){
        super(color, name);
    }
    showName(){
        console.log(super.name)
    }
}
const z4 = new Bmw('black', 'zzz');
console.log(z4.name);

static : 정적 맴버 변수를 만들 수 있음 class.으로 접근 가능

• this.으로 접근하면 안되고 class이름으로 접근해야한다.
• Property 'wheels' does not exist on type 'Car'. Did you mean to access the static member 'Car.wheels' instead?

this.wheels -> Car.wheels로 변경

// before
class Car{
    readonly name:string = 'car';
    color: string;
    static wheels = 4;
    constructor(color:string, name:string){
        this.color = color;
        this.name = name;
    }
    start(){
        console.log('start');
        console.log(this.name);
        console.log(this.wheels);
    }
}

class Bmw extends Car {
    constructor(color:string, name:string){
        super(color, name);
    }
    showName(){
        console.log(super.name)
    }
}
const z4 = new Bmw('black', 'zzz');
console.log(z4.wheels);

class Car{
    readonly name:string = 'car';
    color: string;
    static wheels = 4;
    constructor(color:string, name:string){
        this.color = color;
        this.name = name;
    }
    start(){
        console.log('start');
        console.log(this.name);
        console.log(Car.wheels);
    }
}

class Bmw extends Car {
    constructor(color:string, name:string){
        super(color, name);
    }
    showName(){
        console.log(super.name)
    }
}
const z4 = new Bmw('black', 'zzz');
console.log(Car.wheels);

추상 class(abstract)

• new를 사용해서 객체를 생성 할 수 없다. 상속을 통해서만 사용이 가능
• Cannot create an instance of an abstract class.

 

추상클래스의 내부의 추상메서드는 프로퍼티나 메서드의 이름만 정의해주고  반드시 상속받는 쪽에서 구체적인 구현을 해줘야한다.

abstract class Car{
    color: string;
    constructor(color:string){
        this.color = color;
    }
    start(){
        console.log('start');
    }
    abstract doSomething():void; // 추상메서드를 단순히 정의만 해줌
}

// No!
// const car = new Car('red');

class Bmw extends Car {
    constructor(color:string){
        super(color);
    }
    doSomething(){ // 추상 메서드를 상속받는 곳에서 자세히 구현
        alert(2);
    }

}
const z4 = new Bmw('black');

출처

https://www.youtube.com/watch?v=17Oh028Jpis&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=6