[TypeScript] 클래스 사용- 접근 제한자, readonly, static, abstract

📌 class 작성하기

class Car { 
  // color: string;
  constructor (public color: string) {
    // constructor (readonly color:string) {
    this.color = color;
  }
}

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

멤버 변수를 미리 선언하지 않는 방법은 접근제한자, 혹은 readonly 키워드를 사용하는 것이다.

 

접근 제한자(Access modifier)

• public : 자식 클래스나 클래스 인스턴스에서 접근이 가능하다. (default)
• private : 해당 클래스 내부에서만 접근 가능
• protected : 자식 클래스에서 접근이 가능하지만, 클래스 인스턴스에서는 접근이 불가능

 

📌 접근제한자(Access modifier) - public, private, protected

class Car {
  // name: string = "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:string="car"; ⏩ Car의 name이 public이므로, Bmw(자식 클래스)에서 접근 가능하다.

private name: string = "car";

• Car 클래스 내부에서만 사용할 수 있으며,
• 접근을 제한하려는 변수 앞에 '#'을 붙여 사용할 수도 있다. 

 

읽기전용 지정자 (readonly modifier)

📌 readonly 키워드 사용하기

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

  start() {
    console.log("start");
    console.log(this.name);
    // console.log(this.wheels); -> Error
    console.log(Car.wheels);
  }
}

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

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

name을 수정할 수 없게 만들어 주려면 name 앞에 readonly 키워드를 붙인다.

⏩ name을 수정하려면, constructor 내부에 this.name = name을 선언해 바꿀수 있도록 한다.

 

전역 프로퍼티 (Static Properties)

• 변수 앞에 static을 써주면 정적 멤버변수를 만들 수 있다.
• static을 사용해 선언된 정적 멤버변수/메서드는, this가 아닌 클래스 이름을 사용해야 한다.

 

추상 클래스 (Abstract Classes)

 

• 클래스명 앞에 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");

---

🚀 참고

• TypeScript #6 클래스 class, 코딩앙마
• TypeScript 공식문서 (한국어 번역본)