[TS] 클래스 Class

정재은·2023년 8월 17일

typescript

TypeScript

목록 보기

11/14

TypeScript 클래스는 JavaScript 클래스와 유사하지만 조금씩 다른점이 있다
아래 설명들은 JavaScript의 클래스를 어느정도 알고 있다는 전제하에 작성하였다

🔷 TypeScript 클래스

JavaScript에서 클래스를 작성할 때
생성자 함수(constructor)를 통해 변수를 생성할 수 있었다

하지만 TypeScript에서 클래스를 작성하려면
생성자 함수(constructor)와 함께 클래스 필드에도 프로퍼티를 따로 정의해줘야 한다

🔷 클래스 상속과 super()

클래스 상속

부모/자식 관계를 맺으면서 클래스 상속이 가능하다
부모 클래스는 여러개의 자식 클래스를 가질 수 있지만
하나의 클래스는 반드시 1개의 클래스만 상속 받을 수 있다

extends 키워드를 사용한다

super( )

자식 클래스에서 생성자 함수(constructor)를 정의하려는 경우에는
반드시 부모 클래스의 생성자 함수(constructor)를 호출해야 하는데,
super() 키워드를 이용하면 부모 클래스의 생성자 함수(constructor)를 호출할 수 있다

🔷 접근제어자

프로퍼티 or 메서드 앞에 해당 키워드를 작성하여 사용한다

1. public

JavaScript와 TypeScript의 모든 클래스 프로퍼티 & 메서드의 기본값으로 어디에서나 접근이 가능하다
다른 개발자가 클래스 외부에서 변경·접근·쓰기를 할 수 있도록 명시해줄 때 사용하지만 필수는 아니다

2. protected

상속 작업에서 주로 사용하는 제어자이다
클래스 외부에서는 접근이 불가능하지만
해당 클래스와 해당 클래스를 상속받은 자식 클래스에서는 접근이 가능하다

자식 클래스에서 변경·접근·쓰기 가능

클래스 외부에서 변경·접근·쓰기 불가

3. private

private은 클래스를 상속하거나 확장한 자식 클래스에서도 접근이 불가능하다
오직 선언한 클래스 내에서만 접근이 가능하다

JavaScript의 해시(#)와 같은 기능인데 해시는 런타임에서 오류를 잡을 수 있고,
TypeScript의 private는 컴파일 전에 미리 오류를 잡을 수 있다

클래스 외부에서 변경·접근·쓰기 불가

접근제어자 요약

🔷 단축 구문

기존에 클래스 필드 + 생성자 함수(constructor)로 정의했던 코드들을 조금 더 단축시킬 수 있다

생성자 함수(constructor)의 매개변수에 (접근제어자 변수 : 타입) 를 작성하고
값이 여러개일 경우 콤마(,)로 이어준다

🔷 readonly

읽기 전용 속성으로 readonly 키워드를 사용한다
선언 시 or 생성자 내부에서만 값을 할당할 수 있다
그 외의 경우에는 값을 할당할 수 없으며 오직 읽기만 가능한 상태가 된다

🔷 Getter, Setter

Getter, Setter는 private 속성에 변경·접근·쓰기가 가능하다
메서드 앞에 get, set 키워드를 붙이면 Getter, Setter 함수로서 작동한다

Getter, Setter 함수는 함수 호출 방식이 아닌 프로퍼티처럼 접근해야 한다
❌ alex.score( );
⭕ alex.score;

🔷 클래스와 인터페이스

TypeScript 클래스에서 인터페이스를 상속 받을 때 implements 키워드를 사용한다
인터페이스를 상속받은 클래스에서 프로퍼티 및 메서드는 오직 public만 가능하다
여러개의 인터페이스를 상속 받는다면 콤마(,)로 이어준다