프론트엔드 개발/Typescript

[TypeScript] 타입스크립트 클래스: 상속

하이고니 2023. 2. 22. 16:07

상속


하나의 클래스를 만들고,

그 클래스를 물려받는 세부적인 클래스를 만들고 싶을 때 상속을 사용한다.

 

class Department {
  
  private employees: string[] = []; 

  constructor(private readonly id: string, private name: string) {
  }
  
  describe(this: Department) {
    console.log(`Department (${this.id}): ${this.name}`);
  }

  addEmployee(employee: string) {
    this.employees.push(employee);
  }
  
  printEmployeeInformation() {
    console.log(this.employees.length);
    console.log(this.employees);
  }
}

 

아래와 같이 자식 클래스를 만들 때는 extends 키워드를 사용해 부모의 모든 것을 상속받는다.

자식이 부모의 프로퍼티나 메서드를 덮어쓸 수도 있다.

 

 

자식 클래스에 생성자를 따로 추가해줬는데, 받을 인자가 없으므로

인스턴스를 만들면서 인자를 넣어주려 하면 에러가 발생한다.

 

 

제대로 넣어줬더니 에러 표시줄이 사라졌다.

 

자식 클래스에 아래와 같이 새로운 메서드를 추가해줄 수도 있다.

 

class AccountingDepartment extends Department {
  constructor(id: string, private reports: string[]) {
    super(id, "Accounting");
  }

  addReport(text: string) {
    this.reports.push(text);
  }

  printReports() {
    console.log(this.reports);
  }
}

 

protected 키워드


 

this.employees에는 왜 에러가 발생했을까?

 

 

부모 클래스에서 employees가 private로 지정됐기 때문인데, 이것은 꽤 중요한 사항이다.

private 속성은 정의된 클래스 내에서만 접근이 가능하며 해당 클래스로부터 상속받는 클래스에서는 접근이 불가능하다.

employees는 Department 기반의 클래스가 아니라 딱 Department 내에서만 사용 가능한 것이다.

protected 키워드를 사용해서, 외부에서 접근만 가능하고 변경은 불가능한 속성으로 만들 수도 있다.

 

 

protected는 private과 비슷하지만 private와 다른 점은

프로퍼티를 해당 클래스 뿐만 아니라 확장된 모든 클래스에서도 사용할 수 있다는 것이다.

 

 

this.employees에 생겼던 에러 표시줄이 사라진 것을 볼 수 있다.