Class

ES6에서는 자바스크립트에 클래스가 도입되었다. 클래스를 정의하려면 다음과 같이 class 키워드를 사용하여 클래스에 이름을 지정하고 몸체를 구현해야 한다.

class Blo {
}

클래스는 Property, Method, Constructor를 가질 수 있다.

1) Property

프로퍼티는 클래스의 인스턴스에 소속되는 데이터를 정의한다. 예로,

class Blo {
  name: string;
  age: number;
  job: string;
}

Blo 클래스는 name, age, job 등의 프로퍼티를 가질 수 있다. 클래스의 각 프로퍼티는 타입을 가질 수도 있다.

2) Method

메서드는 객체라는 관점에서 실행되는 함수다. 객체에 제공되는 메서드를 호출하려면 그 객체의 인스턴스부터 만들어야 한다. 클래스의 인스턴스를 생성하려면 'new' 키워드가 필요하다.

class Blo {
  name: string;
  age: number;
  job: string;
  
  greet() {
    console.log('hi');
  }
}

greet 메서드를 호출하기 위해서 인스턴스를 만들어야 한다.

// Blo 타입의 변수 선언
let b: Blo;

// 새 Blo 인스턴스 생성
b = new Blo();

// 타입 선언과 인스턴스 생성을 한 표현식에 표현할 수 있다.
let b: Blo = new Blo();

// 값 지정
b.name = 'hyun';

// greet 메서드 호출
b.greet();

3) Constructor

Constructor는 클래스의 새 인스턴스가 생성될 때 실행되는 특별한 메서드이다. 대개 constructor는 새 객체의 초기 설정을 수행하는 곳에 둔다. constructor 메서드는 반드시 이름이 'constructor' 이어야 한다. constructor는 클래스에 명시적으로 정의하지 않아도 자동으로 만들어진다.

// 아래 두 클래스는 동일한 클래스이다.
class Blo {
}
let a = new Blo();

class Blo {
  constructor(){
  }
}
let a = new Blo();

constructor는 새 인스턴스 생성 시 어떤 값을 전달할 수 있는 파라미터를 가질 수 있다. 클래스를 변경하여 다음과 같이 데이터를 초기화하는 constructor를 만들 수 있다.

class Blo {
  name: string;
  age: number;
  job: string;
  
  constructor(name:string, age:number, job:string){
    this.name = name;
    this.age = age;
    this.job = job;
  }
}

let b: Blo = new Blo('hyun', 30, 'engineer');

new Blo의 매개변수들이 새로 생성된 클래스의 프로퍼티에 맞게 저장된다.

4) 상속

객체 지향 프로그래밍의 또 다른 특징이 바로 상속이다. 상속은 어떤 클래스의 동작이 다른 클래스, 즉 부모 클래스로부터 받도록 한 방법이다. 상속한 다음에는 새 클래스에서 부모 클래스의 여러 동작을 오버라이드, 즉 수정하고 변형할 수 있다.

타입스크립트는 상속을 온전하게 지원한다. 그리고 ES5와 달리 핵심 언어 요소로 제공된다. extends 키워드를 사용하여 상속을 구현할 수 있다.

class Report {
  data: Array<string>;
  
  constructor(data: Array<string>) {
    this.data = data;
  }
  
  run() {
    this.data.forEach(function(line) { console.log(line); });
  }
}

여기서 run을 호출하면 data의 각 요소를 반복며 console.log를 사용하여 값을 출력한다.

let r: Report = new Report(['first', 'second']);
r.run();	

/*result
first
second
*/

두 번째 리포트로 헤더와 데이터를 받지만 Report 클래스의 데이터 표현 방식은 그대로 재사용해 보자. Report 클래스로부터 동작을 받아 재사용하려면 extends 키워드로 상속을 적용해야 한다.

class TabbedReport extends Report {
  headers: Array<string>;
  
  constructor(headers: string[], value: string[]) {
    super(values)
    this.headers = headers;
  }
  
  run() {
    console.log(this.headers);
    super.run();
  }
}

let headers = ['name'];
let data = ['z','b','c'];
let r = new TabbedReport(headers, data);
r.run();

/*result
'z'
'b'
'c'
*/