6.1 타입스크립트에서 클래스 사용하기

6.1.1 클래스란?

클래스는 객체를 만들기 위한 틀, 혹은 설계도입니다. 타입스크립트의 클래스도 자바스크립트의 클래스와 다르지 않습니다. 다만 타입스크립트에서는 클래스도 사용자가 만드는 하나의 타입이라고 이해하면 좋습니다.

6.1.2 클래스 정의

클래스는 class 키워드를 이용해 작성합니다. 보통 이름은 대문자로 시작하도록 합니다.

class Employee {
  name: string;
  age: number;
  team: string;

  constructor(name: string, age: number, team: string) {
    this.name = name;
    this.age = age;
    this.team = team;
  }

  work() {
    console.log("열심히 일하는 중!");
  }
}

클래스는 프로퍼티와 메서드를 가지고 있습니다. 형태를 살펴보면 클래스 정의 자체는 자바스크립트와 다른 게 없으며 타입에 대한 선언만 추가되었다는 것을 알 수 있습니다.

6.1.3 생성자

  constructor(name: string, age: number, team: string) {
    this.name = name;
    this.age = age;
    this.team = team;
  }

constructor은 생성자이고, 객체를 생성하면서 값을 전달할 수 있습니다. 생성자 함수를 작성하지 않을 경우 디폴트 생성자가 불립니다. 타입스크립트의 strict 모드를 사용 중인 경우 프로퍼티를 선언할 때 초깃값을 설정해 주거나 생성자에서 값을 할당해야만 합니다.

const e1: Employee = new Employee('소희', 24, '개발팀');
const e2: Employee = new Employee(); // 오버 로딩 발생

객체를 생성할 때 생성자와 매개변수 타입이 일치하지 않는 경우 타입스크립트에서는 각각의 생성자를 생성하는 오버 로딩이 발생합니다. 자바스크립트에서는 가볍게 무시되었던 부분이니 참고해두면 좋습니다.

6.1.4 Getter & Setter

class Employee {
  name: string;
  age: number;
  team: string;

	...

  // getter
  get name() {
      return this._name;
  }
  // setter
  set name(newName:string) {
      this._name = newName;
  }
}

getter와 setter 함수를 세팅하여 값을 가져오고 변경할 수 있습니다. getter 함수를 선언할 때는 get 키워드를 사용하고, 값을 리턴하는 return문이 없을 경우 에러가 발생합니다. setter 함수는 set 키워드를 이용합니다. 이번엔 변경할 값을 인자로 받아와야 하기 때문에 매개변수 선언이 없을 경우 에러가 발생합니다.

const e1: Employee = new Employee('소희', 24, '개발팀');
console.log(e1.name); // get, '소희'
e1.name = '주예'; // set
console.log(e1.name); // get, '주예'

getter, setter를 이용하면 마치 객체 필드에 직접 접근하는 것처럼 값을 가져오고 할당할 수 있습니다.

6.1.5 상속

클래스는 다른 클래스를 상속받아 자신만의 프로퍼티를 추가해 사용할 수 있습니다.