TypeScript - 클래스

class Car {
    constructor(color) {
        this.color = color;
    }
    start() {
        console.log("start");
    }
}

const bmw = new Car("red");

타입스크립트에서 이렇게 클래스를 선언하면,

Property 'color' does not exist on type 'Car'.(2339)

라는 에러가 발생한다. 이러한 문제는

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

const bmw = new Car("red");

위와 같이 color의 타입을 선언해주면 해결된다. 혹은,

class Car {
    // color: string;
    constructor(public color: string) {
        this.color = color;
    }
    start() {
        console.log("start");
    }
}

const bmw = new Car("red");

color 앞에 public을 붙여주거나

class Car {
    // color: string;
    constructor(readonly color: string) {
        this.color = color;
    }
    start() {
        console.log("start");
    }
}

const bmw = new Car("red");

readonly를 붙여 주는 방법도 있다.

접근 제한자(Access modifier) : public, private, protected

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);
    }
}

위와 같은 코드여도 Bmw 클래스에섯 name을 사용할 수 있지만,

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

name 앞에 public을 붙이면 클래스 밖에서도 변수를 사용할 수 있다.

반대로, 클래스 내에서만 사용하도록 하는 변수를 선언하기 위해서는

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

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

변수 앞에 private나 #을 붙여 주면 된다.

protected

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

위와 같이 변수 앞에 protected를 붙이면 변수가 클래스 밖에서도 사용이 가능하다. 여기까지는 public과 같은데 둘의 차이점은 무엇일까?

class Car {
    protected 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) // error 발생

protected는 자식 클래스 내부에서는 참조할 수 있으나, 클래스 인스턴스로는 참조할 수 없다. (public은 가능!)

요약

pulbic - 자식 클래스, 클래스 인스턴스 모두 접근 가능 (default)
protected - 자식 클래스에서 접근 가능
private - 해당 클래스 내부에서만 접근 가능

static으로 선언한 변수나 메소드는 this가 아니라 클래스명을 적어 준다.

class Car {
    protected name: string = "car";
    color: string;
    static wheels = 4; //static
    constructor(color: string) {
        this.color = color;
    }
    start() {
        console.log("start");
        console.log(Car.wheels); // 클래스명 사용
    }
}

추상 클래스

추상 클래스는 위와 같이 new를 이용하여 개체를 만들 수 없다. 상속을 통해서만 가능하다.

추상 클래스 안에 추상 메소드는 반드시 상속 받은 쪽에서 구체적으로 구현을 해줘야 한다.

abstract class Car {
    color: string;
    constructor(color: string) {
        this.color = color;
    }
    start() {
        console.log("start");
    }
    abstract doSomething(): void;
}


class Bmw extends Car {
    constructor(color: string) {
        super(color);
    }
    doSomething() { // 상속 받은 클래스에서 구현
        alert(3);
    }
}

const z4 = new Bmw("black");