Class
TypeScript에서 클래스(Class)는 객체 지향 프로그래밍(OOP)의 핵심 개념 중 하나로, 객체를 생성하기 위한 템플릿 또는 청사진(blueprint)입니다. 클래스를 사용하여 객체의 상태와 행위를 정의하고, 해당 클래스로부터 여러 개의 객체(인스턴스)를 생성할 수 있습니다.
class Car {
constructor(color){
this.color = color;
}
start() {
console.log("start");
}
}
const bmw = new Car("red");
에러를 발생합니다.
color라는 프로퍼티가 Car에 존재하지 않는다고 합니다.
class Car {
color: string;
constructor(color: string){
this.color = color;
}
start() {
console.log("start");
}
}
const bmw = new Car("red");
이런식으로 color를 선언해주고 거기에 타입까지 지정해주시면 욉니다.
접근제한자 (Access modifier)
Typescript에서는 접근제한자를 사용하여 클래스의 멤버 변수와 메서드의 접근 범위를 제한할 수 있습니다. 접근제한자는 4개의 종류가 존재합니다.
public
기본적으로 모든 멤버 변수와 메서드는 public으로 간주되며, public으로 선언된 멤버는 해당 클래스 내부와 외부에서 모두 접근할 수 있습니다
private
private으로 선언된 멤버는 해당 클래스 내부에서만 접근할 수 있으며, 외부에서는 접근할 수 없습니다. private 멤버에는 클래스 외부에서 접근할 수 있는 getter와 setter 메서드를 통해 접근해야 합니다.
protected
protected로 선언된 멤버는 해당 클래스 내부와 파생 클래스에서 접근할 수 있다고합니다. 외부에서는 protected 멤버에 직접 접근할 수 없습니다. 하지만, 파생 클래스를 통해 접근할 수 있습니다.
readonly
뜻 그대로 읽기만가능 이라는 뜻입니다. readonly로 선언된 멤버 변수는 읽기 전용으로, 값을 변경할 수 없습니다. 일반적으로 클래스의 생성자에서만 초기화할 수 있습니다.
접근제한자 예제
// public : 모두 사용가능
// private : 외부에서 접근 불가능
class Car {
private name: string = "Car";
color: string;
constructor(color: string){
this.color = color;
}
start() {
console.log("start");
}
}
class Bmw extends Car {
constructor(color:string){
super(color);
}
showName(){
console.log(super.name); // error : private 때문에
}
}
private를 표현하는 방법은 두가지가 있습니다
class Car {
// private name = "Car";
// #name = "Car";
}
private 혹은 # 으로 private를 설정할 수 있습니다.
결론
- public : 모두사용가능
- private : private이 포함된 클래스만 사용 가능
- protected : 자식 클래스만 사용 가능
- readonly : 수정 불가능
static
class Car {
// private name = "Car";
// #name = "Car";
static wheels = 4;
console.log(Car.wheels);
}
static 매서드는 this대신 클래스명을 사용합니다.
위의 클래스는 Car이기 때문에 Car 사용
추상클래스
추상클래스 내에 있는 추상클래스는 하위 클래스에서 반드시 구체적인 선언이 필요합니다.
다음포스팅에서는 제네릭에 대해서 알아보겠습니다.
'Typescript' 카테고리의 다른 글
[TS][JS] 객체 비 구조화 할당 (destructuring assignment) (0) | 2023.10.26 |
---|---|
[JS][TS] 유닉스 시간에서 일반 시간으로 변환하기 (0) | 2023.10.21 |
Typescript(8) - Generics (0) | 2023.10.10 |
Typescript(6) - Intersection Types (교차타입) (0) | 2023.10.10 |
Typescript(5) - 리터럴 타입과 유니온 타입 (0) | 2023.10.10 |