[코딩앙마] 타입스크립트 5. 클래스(class)

클래스를 이렇게 선언해주면 될 것 같지만 this.color가 없다고 에러가 난다.

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

 

그럴 때는 멤버변수를 선언해주면 된다.

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

 

접근 제한자나 readonly 키워드를 사용해 멤버 변수를 선언하지 않는 다른 방법도 있다.

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

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

 

 

접근 제한자

접근 제한자(Access modifier)는 public, private, protected와 같은 자바스크립트에는 없는 다른 언어에 존재하는 개념이다. 

• public : 자식 클래스나 클래스 인스턴스에서 접근 가능하다. 아무것도 적지 않으면 public이다.
• private : 해당 클래스 내부에서만 접근 가능하다. #으로 적어줄 수도 있다.
• protected : 자식 클래스에서는 접근 가능하나 클래스 인스턴스에서는 접근할 수 없다.

 

public

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

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

const myToyCar = new ToyCar('red');
console.log(myToyCar.name)



// -------위와 같음------------------------------------
class Car {
  name : string = 'car';
  constructor(public color : string){
    this.color = color;
  }
  start() {
    console.log('start')
  }
}

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

const myToyCar = new ToyCar('red');
console.log(myToyCar.name)

 

private

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

class ToyCar extends Car {
  constructor(color : string) {
    super(color)
  }
  showName(){
    // 에러
    console.log(super.name)
  }
}

const myToyCar = new ToyCar('red');
// 에러
console.log(myToyCar.name)



// -------위와 같음------------------------------------
class Car {
  #name : string = 'car';
  constructor(public color : string){
    this.color = color;
  }
  start() {
    console.log('start')
    console.log(this.#name)
  }
}

class ToyCar extends Car {
  constructor(color : string) {
    super(color)
  }
  showName(){
    // 에러
    console.log(super.name)
  }
}

const myToyCar = new ToyCar('red');
// 에러
console.log(myToyCar.name)

 

protected

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

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

const myToyCar = new ToyCar('red');
// 에러
console.log(myToyCar.name)

 

readonly

프로퍼티 값을 수정하지 못하게 할 때 사용한다.

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

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

const myToyCar = new ToyCar('red');
console.log(myToyCar.name)
// 에러
myToyCar.name = 'myCar'

 

이름을 바꾸고 싶다면 constructor 안에서 변경할 수 있도록 해줘야한다.

class Car {
  readonly name : string = 'car';
  constructor(public color : string, name : string){
    this.color = color;
    this.name = name;
  }
  start() {
    console.log('start')
    console.log(this.name)
  }
}

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

const myToyCar = new ToyCar('red', 'myCar');
console.log(myToyCar.name)

 

static

static 키워드를 사용하면 접근할 때 this가 아니라 클래스 이름을 사용해서 접근한다.

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

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

console.log(Car.wheels)

 

추상 클래스

추상 클래스는 앞에 abstract 키워드를 붙여서 만들 수 있고, 인스턴스를 생성할 수 없으며 상속으로만 사용할 수 있다.

추상 클래스 안에서 abstract 키워드를 붙여 함수를 정의해줄 수 있고 추상 클래스를 상속 받은 클래스는 그 함수를 구현해야한다. 그 함수의 구체적인 동작은 상속받은 쪽의 클래스에서 정해주며, 이렇게 해주면 상속받은 클래스들은 동일한 이름의 함수를 가지지만 다른 동작을 하게 할 수 있다.

abstract class Car {
  constructor (public name : string){
    this.name = name;
  }
  abstract doSomething() : void;
}

abstract class Car {
  constructor (public name : string){
    this.name = name;
  }
  abstract doSomething() : void;
}

class ToyCar extends Car {
  constructor(name : string){
    super(name)
  }
  doSomething(){
    // doSomething1
  }
}

class RealCar extends Car {
  constructor(name : string){
    super(name)
  }
  doSomething(){
    // doSomething2
  }
}