클래스

객체지향 프로그래밍을 할 때 클래스를 사용했을 것이다. 일단, 기본적으로 JS에서 클래스 정의와 사용 코드를 보자.

JS 클래스

 

클래스명을 정하고 클래스 내부에 클래스에 사용되는 변수, 생성자, 메서드를 선언하였다. 이 클래스를 사용할 때는 다음과 같이 사용한다.

JS 클래스 사용

 

또한, 확장성을 가지고 있다. 다음 코드처럼 student 클래스를 상속받아 새 클래스를 만들 수 있다.

JS 클래스 상속

 

지금은 JS 문법에 대한 정리가 아니므로 JS 클래스 소개는 이쯤 마무리하겠다.

TS의 클래스

그럼 이제 TS에서의 클래스 사용을 보자. 사실 클래스 정의는 JS와 똑같다. 앞서 설명한 것처럼 TS가 JS 문법을 바탕으로 타입선언을 추가한 것이라 클래스 정의와 사용도 타입 선언의 추가만 있으면 된다.

TS 클래스 1

 

코드를 보면 JS 클래스와 동일하게 변수를 선언할 경우 암묵적인 any 타입 추론으로 경고를 발생시킨다.

따라서, 다음과 같이 타입 선언을 같이 해줘야 한다.

TS 클래스 3

 

또한, 클래스의 상속도 동일하게 가능하다.

TS 클래스 상속

차이점

그럼 JS 클래스와는 타입 선언을 제외한 차이점은 없을까? 몇 가지 존재하는 TS 클래스만의 특징을 살펴보자.

1. 변수 선언 시 초기화 필수

TS 클래스 2

 

JS 클래스와는 달리 TS에서는 다음과 같이 변수 선언만 할 경우 에러가 발생한다. 반드시 초기화 또는 생성자를 구현해야 한다.

초기화

생성자

 

예외적으로 이런 방법으로 해결할 수도 있다.(추천하지는 않는다)

선택적 프로퍼티

2. 타입으로 사용 가능

클래스로 정의했지만 반드시 객체 정의에서만 사용되는 것은 아니다. 마치 인터페이스처럼 객체의 타입 정의로도 사용이 가능하다.

객체 타입으로 사용

3. 상속 클래스 사용 시 super 정의 필수!

TS에서 클래스를 상속받아 새로운 클래스를 정의할 때는 상속받은 클래스의 필드를 사용하는 super 정의가 필수적이다.

super 정의 필수

 

전반적으로 JS의 클래스 형태는 똑같이 따라가지만 검사가 더 엄격해졌다.

참고자료

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런