[Typescript] 클래스(Class)

↓ 클래스에 대한 개념이 없다면 참고

https://winterflower.tistory.com/178

 

 

타입스크립트에서 클래스를 작성할 때는 멤버 변수를 미리 선언해주어야 한다.

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

const bmw = new Car("red");

 

 

멤버 변수를 미리 선언하지 않는 방법도 있다. 접근 제한자나 readonly 키워드를 이용하면 된다.

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

const bmw = new Car("red");

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

const bmw = new Car("red");

 

---

접근 제한자에 대해 더 자세히 알아보자. 접근 제한자에는 public, private, protected가 있다.

public은 자식 클래스나 클래스 인스턴스에서 접근 가능하다. default값으로 접근 제한자를 쓰지 않으면 public이다. 

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

class Bmw extends Car{
    constructor(color: string){
        super(color);
    }
    showName(){
        console.log(super.name);  // "car"
    }
}

const z4 = new Bmw("black");

 

Car의 name이 public이기 때문에 자식 클래스 내부에서 접근해도 문제없이 사용할 수 있다.

 

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

class Bmw extends Car{
    constructor(color: string){
        super(color);
    }
    showName(){
        console.log(super.name);  // Error
    }
}

const z4 = new Bmw("black");

private로 바꾸면 자식 클래스 내부에서 접근할 수 없기 때문에 에러가 발생한다. name 속성은 Car 클래스 내에서만 사용할 수 있다.

class Car{
    #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);  // Error
    }
}

const z4 = new Bmw("black");

private 대신 #으로 표현할 수 있다. 속성을 사용할 때도 #을 붙여주어야 한다. 

 

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

class Bmw extends Car{
    constructor(color: string){
        super(color);
    }
    showName(){
        console.log(super.name);  // "car"
    }
}

const z4 = new Bmw("black");
console.log(z4.name);   // Error

protected인 속성은 자식 클래스에서 참조할 수 있지만 클래스 인스턴스로는 참조할 수 없다.

 

정리해보면,

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

- protected : 자식 클래스에서 접근 가능

- private : 해당 클래스 내부에서만 접근 가능

 

---

클래스 인스턴스의 속성을 바꾸지 못하게 하려면 readonly로 지정하면 된다. constructor을 통해서만 name 속성을 바꿀 수 있다.

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

class Bmw extends Car{
    constructor(color: string, name){
        super(color, name);
    }
    showName(){
        console.log(super.name);
    }
}

const z4 = new Bmw("black", "zzzz4");
console.log(z4.name);
z4.name = "zzzz4";  // Error

 

 

static으로 선언한 정적 멤버 변수나 메서드는 this가 아닌 클래스명으로 참조한다.

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

class Bmw extends Car{
    constructor(color: string, name){
        super(color, name);
    }
    showName(){
        console.log(super.name);
    }
}

const z4 = new Bmw("black", "zzzz4");
console.log(z4.wheels);  // Error
console.log(Car.wheels);  // 4
z4.name = "zzzz4";  // Error

 

 

---

추상 클래스는 클래스 앞에 abstract 키워드를 사용해서 만들 수 있다. 

new를 사용해서 객체를 만들 수 없고 상속해서 사용하는 것만 가능하다.

추상 클래스 내에 있는 추상 메서드는 상속받은 클래스에서 반드시 구체적으로 구현해야 한다.

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

const car = new Car("red");  // Error

class Bmw extends Car{
    constructor(color: string){
        super(color);
    }
    doSomething(){
        alert(3);
    }
}

const z4 = new Bmw("black");