TypeScript 클래스 Class

📖 Class

클래스는 객체지향형 프로그래밍의 기본 단위로서 객체를 생성하는 템플릿과 같은 기능을 합니다. JavaScript는 Prototype에 기초한 클래스 개념을 가지고 있는데, 이는 C#, Java와 같은 객체지향형 프로그래밍 언어를 사용하는 개발자에게 익숙하지 않은 개념입니다. TypeScript에서는 C#, Java에서 사용하는 클래스 개념과 유사한 클래스를 사용하며, class 라는 키워드 사용하여 클래스를 구현합니다.

자바스크립트에서는 아래 코드가 아무 이상없이 잘 작동합니다.

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

const bmw = new Car("red")

Typescript 클래스는 클래스 몸체에 클래스 프로퍼티를 사전 선언하여야 합니다.

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

const bmw = new Car("red")

혹은 접근 제한자와 readonly를 사용하는 방법도 있습니다.

class Car {
    // color: string;

    //혹은 readonly를 이용해도 됩니다.
    constructor(public color: string){
        this.color = color
    }
    start(){
        console.log("start")
    }
}

const bmw = new Car("red")

접근 제한자란(Access modifier) Typescript 클래스는 클래스 기반 객체 지향 언어가 지원하는 접근 제한자(Access modifier) public, private, protected 를 지원하며 의미 또한 기본적으로 동일합니다.

단, 접근 제한자를 명시하지 않았을 때, 다른 클래스 기반 언어의 경우, 암묵적으로 protected로 지정되어 패키지 레벨로 공개되지만 Typescript의 경우, 접근 제한자를 생략한 클래스 프로퍼티와 메소드는 암묵적으로 public이 선언된다. 따라서 public으로 지정하고자 하는 멤버 변수와 메소드는 접근 제한자를 생략합니다.

접근 제한자를 선언한 프로퍼티와 메소드에 대한 접근 가능성은 아래와 같습니다.

예제 1. public

자식 Bmw에서 super.name으로 name 값을 가져가고있습니다. 아무것도 명시되지 않았을때에는 public입니다.
아래 예제에는 명시적으로 public을 적어두었습니다. 적지 않아도 잘 작동합니다.

class Car {

  public 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")

예제 2. private

name에 private을 사용하면 자식 컴포넌트에서는 name을 사용할수 없게 되었습니다. Car클래스 에서만 사용할수 있습니다.

class Car {
    private 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")


또다른 표현방법은 #name 입니다. 앞에 #을 붙혀 주면 됩니다.
start의 콘솔과 같이 this.#name 처럼 사용합니다.

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

예제 3. protected

프로텍티드는 자식 클래스에서도 접근이 가능합니다.
프로텍티드는 자식 클래스에서는 참조할수 있으나 클래스 인스턴스로는 참조할수 없습니다.
class Car {
    protected 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)

정리해보겠습니다.

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

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

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

예제 4. readonly 

아래 예제의 name을 수정하지 못하게 만들수있습니다.
아래 name앞에 readonly를 적어주면 z4를 수정하지 못하게됩니다.

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")
z4.name = "zzzz4"

// 예제 5. static

// static을 사용한 정적 맴버 변수나 정적 메서드는 this를 사용하는게 아닌 클래스 명을 사용합니다.

// console.log(Car.wheels)


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.name)
        console.log(this.wheels)
    }
}

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

예제 6. 추상 class

추상클래스는 class 앞에 abstract를 입력해줍니다.
추상글래스는 new를 이용해 객체를 만들수 없습니다.
상속을 통해서만 사용이 가능합니다.

그리고 추상 클래스 내부에 추상 메서드는 반드시 상속 받은 쪽에서 구체적인 구현을 해줘야합니다.

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

const car = new Car("red")

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