TypeScript #6 클래스 Class

class Car {
  constructor(color) {
    this.color = color; // color프로퍼티가 없다고 에러가 나온다
  }

  start() {
    console.log('start')
  }
}

const bmw = new Car('red'); // 자바스크립트에서는 문제가 없다고 나오지만 타입스크립트는 에러가 나온다.

// 해결 예제
class Car {
  color: string; // 타입스크립트에서 클래스를 작성할 때 멤버변수는 미리 선언해줘야 한다.
  constructor(color: string) {
    this.color = color; 
  }

  start() {
    console.log('start')
  }
}

const bmw = new Car('red'); 

// 멤버변수를 미리 선언하지 않는 방법
class Car {
  // color: string; // 접근제한자나 readonly를 사용하는 방법
  constructor(public color: string) {
    this.color = color; 
  }

  start() {
    console.log('start')
  }
}

class Car {
  // color: string; // 접근제한자나 readonly를 사용하는 방법
  constructor(readonly color: string) {
    this.color = color; 
  }

  start() {
    console.log('start')
  }
}

// 접근 제한자(Access modifier) = public, private, protected
// es6의 클래스들은 접근제한자를 지원하지 않았다. 하지만 타입스크립트에서는 지원한다.
// public - 자식 클래스, 클래스 인스턴스 모두 접근 가능
// protected - 자식 클래스에서 접근 가능
// private - 해당 클래스 내부에서만 접근 가능

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

// private
class Car { // private 대신 #을 앞에 써줘도 된다.
  private name: string = "car"; //name앞에 priavte을 사용하면 자식쪽에서 name은 사용할 수 없다
  color: string;
  constructor(color: string) {
    this.color = color;
  }
  start() {
    console.log("start");
    console.log(this.name) // Car안에서만 사용이 가능하다.
  }
}

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

const z4 = new Bmw("black")

//protected
class Car {
  protected name: string = "car"; // 접근제한자 protected도 자식클래스에서 접근이 가능하다.
  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) // protected는 자식클래스 내부에서는 참조할 수 있으나
                     // 클래스 인스턴스는 참조할 수 없다.

// static
class Car {
  name: string = "car";
  color: string;
  static wheels = 4; // 스태틱으로 선언
  constructor(color: string) {
    this.color = color;
  }
  start() {
    console.log("start");
    console.log(this.name);
    console.log(Car.wheels);// 스태틱으로 선언된 변수는 this가 아니라 클래스명을 적어준다.
  }
}

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

const z4 = new Bmw("black")
console.log(Car.wheels) // 스태틱변수라서 클래스명을 적어줌.

// 추상 class
abstract class Car { // abstract키워드를 붙여서 사용
  color: string;
  constructor(color: string) {
    this.color = color;
  }
  start() {
    console.log("start");
  }
  abstract doSomething():void; // 자식 클래스에서 에러가 발생한다.
  // 추상 클래스 내부의 추상 메서드는 반드시 상속받은 쪽에서 구현을 해줘야 한다.
  // 추상은 프로퍼티나 메서드의 이름만 선언해주고 구체적인 기능은 상속 받는쪽에서 구현해주는 것을 의미한다.
}
const car = new Car("red") // 에러발생! 추상 클래스는 new를 이용해서 객체를 만들 수 없다.
// 오직 밑에처럼 상속을 이용해서만 사용 가능
class Bmw extends Car {
  constructor(color: string) {
    super(color);
  }
  doSomething(){
    alert(3);
  } // 이렇게 구체적인 구현을 해주면 에러가 사라진다.
}

const z4 = new Bmw("black")