개요
ts의 class는 object를 만드는 일종의 blueprint(설계도)이며 사용자가 만드는 타입의 하나라고 볼 수 있다. class이전에 object를 만드는 방법은 function이었다. ts의 클래스는 일반적인 js 클래스와 매우 유사하지만 몇가지 기능이 부족하다.
js에서의 class는 public, private, protect 등의 접근제한자가 부족하고, babel같은 도구를 활용해야한다. ts에서는 class도 ts는 js의 class보다 더 강력하게 다양한 기능을 지원한다.
선언과 특징
- 관례
class 의 이름은 대문자로 시작하는 것이 관례이며 변수의 이름은 다른 변수들 처럼 소문자로 시작한다. class의 생성은 new 키워드를 통해 생성한다. 다른 OOP class와 마찬가지로 constructor 통한 초기화 역시 가능하다.
class Person {
name;
age;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
const p1 = new Person('Mark', 45);
// class는 해당 class만의 type이 만들어지는 개념이다.
- 초기화의 규칙
또한 아래처럼 name의 초기값을 설정하지 않으면 오류가 발생한다. 그러나 age의 오른쪽에 !를 넣어주면 프로그래머가 어디선가 age 값을 할당해주겠다는 명시적인 의미로 처리되어, 에러가 사라진다. 다만 명시적으로 할당한 것이기에 값을 따로 설정하지 않으면 undefined가 발생한다. 또한 선언과 함께 값을 지정해주는 것도 가능하다.
class Person {
private name: string; // 에러 발생
private age!: number;
private gender: 'male';
}- 중복 constructor 불가능
다른 OOP에서는 constructor 를 여러개 이상 선언하는 overloading이 가능하지만 ts는 불가능하다.
js에서의 class는 OOP class와의 사용 목적이 다르고, js와 어울리지 않으며 복잡성을 높일 수 있기 때문에 지원하지 않는다. js의 슈퍼셋 언어인 ts역시 마찬가지이다.
class Person {
name;
age;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// 불가능
constructor(name: string, age: number) {
this.name = name;
this.age = age;
console.log('불가능!');
}
}constructor내에 비동기 불가능
constructor 의 내부에서 async await를 사용하지 못하며 에러처리난다. 비동기 동기의 순서와 관련하여, class는 개발자의 의도대로 값이 적용되었는지 모르기 때문이다. 비동기를 사용하려면 다음과 같이 해줘야 한다.
class AsyncConstructorExample {
name;
// async constructor() {
// this.name = await ~
// } 비동기 구문 불가능
constructor() {
this.init();
}
async init() {
try {
// 비동기 작업을 처리하고 결과를 기다림
const data = await this.fetchData();
console.log('Fetched data:', data);
// 생성자 외부에서 초기화 작업을 이어갈 수 있음
} catch (error) {
console.error('An error occurred:', error);
}
}
async fetchData() {
// 비동기 작업을 수행하는 메서드
}
}
// 생성자가 실행될 때 init 메서드가 비동기 작업을 수행하고 완료됨
const instance = new AsyncConstructorExample();
- 접근 제한자
ts에서 제공하는 접근 제한자는 다음과 같다.
-
public
ts는 기본적으로 모두 외부에서 접근이 가능하다. 이를 가능하게 해주는 외부 접근 제한자는 public이다. 직접 달아줄 수도 있으며 변수, 함수, 생성자에도 public을 달아줄 수 있다. -
private
class 내부에서만 접근 가능한 제한자이다. private 패턴을 통해 싱글톤 패턴을 구현할 수 있다. js에서는 public과 private에서 기본적으로 제공되진 않는다. 관습으로 변수나 함수 이름 앞에_(언더바)를 붙여 지정해주었었다. -
protected
상속을 받은 class에서 접근이 가능한 제한자이다.
class Person {
private name: string;
public age!: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
const p1: Person = new Person('Mark', 32);
console.log(p1.name); // 불가능
console.log(p1.age); // 가능- public 인자가 있는 constructor
인자에 접근제한자를 함께 작성하면 변수 선언과 this 초기화를 하지 않고도 생성이 가능하다.
class Person {
constructor(public name: string, private age: number) {
}
}
const person: Person = new Person('Bob', 54);
console.log(person.age); // private 이기 떄문에 불가능
