[TypeScript] Class

class

class Car {
  constructor(color) {
    this.color = color; // Property 'color' does not exist on type 'Car'
  }
}

TS에서 class 사용시 멤버변수는 미리 선언해줘야 한다.

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

const bmw = new Car("red");

---

접근 제한자(Access modifier)

---

• public
• private
• protected

멤버변수를 먼저 선언하지 않아도 된다.

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

const bmw = new Car("red");

혹은 readonly 를 사용할 수도 있다.

public

---

자식 클래스나 클래스 인스턴스에서 접근 가능함.
아무것도 표기하지 않고 작성하면 모두 public

class Car {
  name: string = "car"; // public이 적용되고 있는 상태
  color: string;
  constructor(color: string) {
    this.color = color;
  }
  start() {
    console.log("go");
  }
}

class Bmw extends Car {
  constructor(color: string) {
    super(color); // super가 아니면 err
  }
  showName() {
    console.log(super.name);
  }
}

---

private

---

class Car {
  private name: string = "car"; // 부모 클래스의 맴버변수에 private를 붙이면
  color: string;
  constructor(color: string) {
    this.color = color;
  }
  start() {
    console.log("go");
    // 여기서만 사용 가능
  }
}

class Bmw extends Car {
  constructor(color: string) {
    super(color);
  }
  showName() {
    console.log(super.name); // err - 자식 클래스 내부에서 사용할 수 없게 된다.
  }
}

부모 클래스의 맴버변수에 private를 붙이면 자식 클래스 내부에서 사용할 수 없게 된다.

#을 붙여서 사용할 수도 있다. ex) #name, this.#name

---

protected

---

자식 클래스 내부에서 참조가능, 클래스 인스턴스로는 불가능

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

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

const z4 = new Bmw("black");
console.log(z4.name); // err - Property 'name' is protected and only accessible within class 'Car' and its subclasses

---

Static Property

---

정적 멤버 변수를 만들 수 있다.

class Car {
  name: string = "car";
  color: string;
  static wheels = 4;
  constructor(color: string) {
    this.color = color;
  }
  start() {
    console.log("go");
    console.log(this.wheels); // err -> 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(z4.wheels); //  err -> console.log(Car.wheels);

static으로 선언한 정적 멤버변수나 메서드는 클래스명을 넣어주어야 한다.

---

추상 클래스(abstract)

---

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

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

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

new를 통해서 객채를 만들 수 없고 상속을 통해서만 사용이 가능하다

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

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

추상 클래스 내부의 추상 메소드는 반드시 상속받은 쪽에서 구체적인 구현을 해주어야 한다.

추상 클래스는 프로퍼티나 메서드의 이름만 선언해주고 구체적인 기능은 상속받는 쪽에서 구현을 해주도록 한다.