[타입스크립트]클래스 / this 타입 / 접근제한자

class Department {
	name: string;
    constructor(n: string){
    	this.name = n;
    }
}

클래스 필드

• 클래스의 프로퍼티를 미리 타입을 지정해 등록해준다.

클래스 필드 축약

문제점

• 만약 클래스에 많은 프로퍼티가 있고 이 프로퍼티가 constructor로 초기화 되어야 한다면 constructor의 매개변수와 클래스 필드 모드 타입을 명시해 줘야하기 때문에 번거로울 수 있다.

class Department{
  private employees: string[] = [];
  constructor(public name: string) {
  }
}

해결방법

• 클래스 필드의 선언을 없애고 대신 접근제한자를 파라미터 앞에 붙여준다.
• 타입스크립트는 이 파라미터를 클래스의 프로퍼티로 등록하려고 하는 것을 알수 있다.
• 파라미터의 이름이 key가 되고 값이 할당된다.

this 지정

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

  constructor(n: string) {
    this.name = n;
  }
  
  describe (this: Department) {
    console.log('Department: ' + this.name)
  }

• 타입스크립트는 this에 Department라고 명시하면 this가 어떤 것(Department)을 참조해야 하는지 알 수 있다.
• this는 class가 들어가야한다. 그러면 describe 메소드가 실행될 때 this는 항상 class로 생성된 인스턴스를 가리킨다.(describe 속해있는 객체)

접근제한자

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

  constructor(n: string) {
    this.name = n;
  }
  
  describe (this: Department) {
    console.log('Department: ' + this.name)
  }
  
const accounting = new Department('Accounting');

문제점

• employees 배열을 직접적으로 접근해서 조작해도 타입스크립트에서 에러를 발생시키지 않는다.

accounting.employees[0] = 'Anna';

해결방법

• 클래스 필드에서 employees 앞에 private 키워드를 붙여준다

private employees: string[] = [];

private

• 프로퍼티나 메소드에 설정할 수 있다.
• private를 설정하면 오직 클래스 내에서만 접근할 수 있다.

public

• pulic은 default값으로 따로 설정해주지 않으면 자동으로 public이 프로퍼티가 된다.

• pulic으로 설정된 프로퍼티는 직접 접근할 수 있다.

• 자바스크립트는 이해하지 못하는 키워드로 런타임 중에는 에러를 발생하지 않는다.

protected

• private 속성을 부여받은 프로퍼티는 해당 프로퍼티가 속해있는 클래스에서만 접근할 수 있고 하위 클래스에서는 해당 프로퍼티에 접근이 불가능 하다.
• 이때 protected를 써준다. protected는 상속받은 하위 클래스까지 프로퍼티에 접근할 수 있도록 한다.

readonly

• constructor이 호출되서 초기화가 일어나면(인스턴스 생성) 그 이후에 readonly속성이 명시된 프로퍼티 값은 변경할 수 없도록 한다.
• 컴파일 에러발생 / 런타임 에러X(자바스크립트 지원X)

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

  constructor(private readonly id: string, public 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)
  }
}