본문 바로가기
개인공부/Typescript 공부

Typescript 클래스

by 강물둘기 2023. 3. 9.

* 조시 골드버그의 러닝 타입스크립트라는 책을 읽고 정리하면서 코드를 작성해본 내용입니다.

 

1. 클래스와 메서드

타입스크립트는 일반 함수와 마찬가지로 메서드를 이해한다. 

매개변수 타입이나 인수 개수를 추론하고, 반환 타입을 지정하지 않으면 추론 가능하다. 

 

클래스의 constructor도 메서드와 마찬가지로 취급된다. 

인스턴스를 생성할 때 인수의 타입과 개수가 알맞은지 확인한다.

 

2. 클래스 프로퍼티

타입스크립트에서 클래스의 프로퍼티를 읽거나 쓰려면 명시적으로 선언해야 한다. 클래스 프로퍼티는 인터페이스와 동일한 구문으로 작성한다. 프로퍼티 이름 뒤에 선택적으로 타입 애너테이션을 붙일 수 있다.

선언되지 않은 프로퍼티에 값을 할당하려고 하면 에러가 발생한다.

클래스에 명시적으로 프로퍼티를 선언함으로써 클래스 인스턴스에 어떤 프로퍼티가 허용 가능한지 빠르게 알 수 있다.

 

2.1 함수 프로퍼티

클래스에 메서드 방식으로 함수를 선언하면 모든 클래스 인스턴스는 동일한 함수 정의를 사용한다.

 

반면에 프로퍼티를 선언하면서 프로퍼티값에 함수를 할당하는 경우 각각의 클래스 인스턴스가 독자적인 함수(사실은 프로퍼티)를 가지게 된다.

 

2.2 초기화 검사

엄격한 컴파일러 설정이 활성화 되어 있으면 undefined 타입으로 선언된 각 프로퍼티들이 생성자에서 할당 되었는지 확인한다. 이러한 엄격한 초기화 검사 설정은 클래스 프로퍼티에 값을 할당하지 않는 실수를 방지한다.

 

클래스 생성자 다음에 클래스 속성을 의도적으로 할당하지 않는 경우가 있을 수도 있다.

이러한 경우 이름 뒤에 !를 붙여서 검사를 비활성화 할 수 있다.

 

2.3 선택적 프로퍼티

프로퍼티 이름 뒤에 ?를 붙여서 선택적 프로퍼티를 선언할 수 있다.

 

2.4 읽기 전용 프로퍼티

프로퍼티 이름 앞에 readonly 키워드를 추가해 읽기 전용으로 선언할 수 있다.

readonly 키워드는 자바스크립트로 컴파일될 때 삭제된다.

readonly 키워드로 선언된 프로퍼티는 초기값만 할당할 수 있고 재할당 불가능하다.

 

원시 타입의 초깃값을 갖는 readonly로 선언된 프로퍼티는 원시 타입을 갖는것이 아니라 리터럴 타입으로 유추된다.

 

 

3. 타입으로서의 클래스

어떤 변수에 타입 애너테이션으로 클래스를 할당하게되면 해당 변수에는 클래스의 인스턴스 형태의 값만 할당할 수 있다.

 

꼭 해당 class 의 인스턴스가 아니어도 형태가 같은 객체이면 할당 가능하다.

 

 

4. 클래스와 인터페이스

타입스크립트는 클래스 이름 뒤에 implements 키워드와 인터페이스 이름을 추가함으로써 클래스의 인스턴스가 해당 인터페이스를 준수한다고 선언할 수 있다.

타입이 Person과 맞지 않으면 오류가 발생하는것을 볼 수 있다.

 

4.1 다중 인터페이스 구현

클래스에 다중 인터페이스를 선언할 수도 있다. 인터페이스는 쉼표로 구분한다.

여러 인터페이스를 선언하면 모든 인터페이스의 타입 조건을 만족해야 한다.

 

종종 여러개의 인터페이스가 상충되어 구현이 불가능한 경우도 있다.

다중 인터페이스를 사용할 때 인터페이스가 상충되지 않도록 주의하여 사용해야 한다.

 

 

5. 클래스 확장

extends 키워드를 사용하여 클래스를 확장하는 경우 클래스의 타입도 확장된다.( 하위 클래스에 기본 클래스의 속성과 타입이 모두 상속된다.)

하위 클래스의 인스턴스는 기본 클래스의 메서드를 사용할 수 있다.

 

5.1 할당 가능성 확장

클래스를 확장할 때 하위 클래스의 맴버가 기존 클래스에 없으면 하위 클래스 타입으로 선언된 변수에는 기존 클래스로 만들어진 인스턴스를 할당할 수 없다.

 

이러한 경우 하위 클래스의 프로퍼티를 선택적 프로퍼티로 만들면 할당이 가능하다.

 

5.2 재정의된 생성자

기본적으로 하위 클래스에는 생성자(constructor)를 정의할 필요가 없다. 이 경우 상위 클래스의 생성자를 사용한다.

하위 클래스에 생성자를 정의하는 경우 super 키워드를 통해 상위 클래스 생성자를 호출해야 하는데 이 때 타입검사기가 올바른 매개변수를 사용하는지 확인한다.

 

* 생성자를 재 정의할때 super를 호출하기 이전에 super나 this를 참조하려고하면 에러가 발생한다.

 

5.3 재정의된 메서드

하위 클래스의 메서드에 상위 클래스에 존재하는 이름의 메서드를 새로 선언할 수 있다.(오버 라이딩) 이 경우 새로운 메서드의 타입이 상위 메서드 대신 사용할 수 있어야 한다.

 

상위 클래스의 메서드 타입에 포함되지 않게 새로운 메서드를 하위 클래스에 선언하면 에러가 발생한다.

 

5.4 재정의된 프로퍼티

프로퍼티도 메서드와 마찬자기로 상위 클래스에 존재하는 이름의 프로퍼티를 하위 클래스에 새롭게 정의할 수 있다.

마찬가지로 상위 클래스 프로퍼티의 타입에 포함되도록 타입이나 값을 지정해줘야 한다.

상위 클래스에 포함되지 않는 범위로 타입을 지정하면 에러가 발생한다.

 

 

6. 추상 클래스

상위 클래스에서 직접 쓰지는 않을 메서드이지만, 하위 클래스에서 해당 메서드를 제공할 것이라면 클래스를 추상화 하여 만들 수 있다. 추상화 하려는 경우 클래스 이름과 메서드 앞에 abstract 키워드를 추가한다.

 

추상 클래스는 직접 인스턴스를 만들 수 없다.

 

 

7. 맴버 접근성

타입스크립트의 맴버 접근성은 클래스 맴버의 선언 이름 앞에 public, private, protected를 추가해서 만든다.

public 맴버는 모든곳에서 누구나 접근 가능하다.

protected 맴버는 해당 클래스 내부 또는 하위 클래스에서만 접근가능하다.

private 맴버는 해당 클래스 내부에서만 접근 가능하다.

맴버 접근성은 자바스크립트로 컴파일될 때 사라진다. 기본값은 public이다.

 

7.1 정적 필드 제한자

static 키워드를 사용해 인스턴스 맴버가 아닌 클래스 자체에 맴버를 선언할 수 있다.

인스턴스에서 해당 프로퍼티에 접근하려고 하면 에러가 발생한다.

 

Reference

- 조시 골드버그, 러닝 타입스크립트, 고승원 옮김, 2023

- https://www.typescriptlang.org/ko/docs/handbook/intro.html

'개인공부 > Typescript 공부' 카테고리의 다른 글

Typescript 제네릭  (0) 2023.03.16
Typescript 타입 제한자  (0) 2023.03.11
Typescript 인터페이스  (0) 2023.03.05
Typescript 배열  (0) 2023.03.03
Typescript 함수  (0) 2023.03.01

댓글