[TypeScript] 클래스 Class

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

const bmw = new Car('red');

위와 같이 클래스를 정의했을 때, 생성자 함수의 color 프로퍼티가 Car에 타입이 없다고 나옵니다.

 

그렇기 때문에 타입스크립트에서 클래스에서 생성자함수를 사용할 때, 멤버 변수를 미리 선언해주어야 합니다.

 

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

const bmw = new Car('red');

이외에도 다른 방법으로 타입을 지정해줄 수 있습니다.

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

const bmw = new Car('red');

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

const bmw = new Car('red');

생성자 함수 매개변수 앞에 public이나 readonly를 적어주는 것입니다.

 

접근 제한자

ES6에서 지원하지 않았던 접근 제한자를 TypeScript에서는 지원합니다.

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

 

1. public: 자식 클래스나 클래스 인스턴스에서 접근이 가능합니다.

class Car {
  public 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');

자식 클래스의 showName() 메서드에서 부모 클래스의 name에 접근하는데, 이는 public으로 지정했기 때문에 가능합니다.

 

---

2. private: 클래스 내부에서만 사용할 수 있습니다.

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

 

이때는 BMW 클래스의 메서드의 console.log에서 에러가 발생합니다. 혹은 변수에 #을 앞에 넣어줘도 가능합니다.

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

---

3. protected: 자식 클래스에서 접근이 가능하지만, 인스턴스에서는 접근이 불가능합니다.

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');
z4.name; // error

---

4. static: 정적 멤버 변수를 만들수 있습니다.

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

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

const z4 = new BMW('black');
console.log(z4.wheels); // error

클래스 내부에서 자기 참조 변수를 통해 static 프로퍼티에 접근하려고 하면 에러가 발생합니다. 왜냐하면 클래스에서 정적으로 지정된 멤버이기 때문입니다. 따라서 아래와 같이 바꿔야 합니다.

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

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

const z4 = new BMW('black');
console.log(Car.wheels);

추상 클래스

클래스 앞에 abstract를 붙여서 사용합니다. 추상 클래스는 new를 통해서 인스턴스를 생성할 수 없고 오직 상속을 통해서만 사용이 가능합니다.

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

const car = new Car('red'); // error

그래서 위의 경우는 에러가 발생하게 됩니다.

 

그리고 클래스 메서드에 abstract 키워드를 앞에 넣는 것도 동일합니다. 상속받은 클래스에서 구체적인 메서드의 기능을 정해야 합니다.

 

이것은 대부분의 클래스 기능을 공통적으로 사용하나, 개별적인 기술을 사용해야 할 때 좋습니다.