바로 직전 TS에서의 Class에 대해 알아보았는데 이때 접근 제한자에 대한 것이 나왔다.
그런데 이것의 성격에 대해서는 따로 분리해놓는게 가독성을 높일 것 같아 나눠 작성해본다.
다른 객체지향언어에서는 지원하는 기능인 접근 제한자 기능을 ES6에서는 지원하지 않았으나, TS에서는 지원한다.
public
은 자식 클래스 or 클래스 인스턴스에서 접근이 가능하다.
아무것도 작성하지 않았을 땐 기본적으로 모두 public이다.
class Car {
name: string = "car"; // public name과 동일
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);
}
}
const z4 = new Bmw("black");
위 예시 코드를 보면 Bmw클래스가 Car로부터 확장되었고, showName에서 super.name
을 통해 Car클래스의 name에 접근했다.
이는 특별히 작성하지 않았어도 name이 public
이기 때문에 자식 클래스에서 접근이 가능했던 것이다.
class Car {
protected name: string = "car";
color: string;
constructor (color: string) {
this.color = color;
}
start() {
console.log(this.name);
}
}
class Bmw extends Car {
constructor (color: string) {
super(color);
}
showName() {
console.log(super.name); // 접근 가능(에러 안 남)
}
}
public과 유사하게 protected
에서도 자식 class의 접근에 문제가 없다.
차이는 인스턴스에서 발생한다.
위 코드를 작성하고 아래를 찍어보려 하면 에러가 뜬다.
const z4 = new Bmw("black");
console.log(z4.name); // 에러 발생
이것이 protected와 public의 차이이다. protected
는 자식 클래스의 접근은 허용하지만 클래스의 인스턴스에서의 접근은 불허한다.
반면 private을 사용하면 오직 해당 내부에서만 사용이 가능하다.
class Car {
private name: string = "car"; // private으로 작성
color: string;
constructor (color: string) {
this.color = color;
}
start() {
console.log(`${this.name} "start"`); // Car 내부에서만 사용
}
}
class Bmw extends Car {
constructor (color: string) {
super(color);
}
showName() {
console.log(super.name); // 에러 발생
}
}
이러한 기능은 #
으로도 사용 가능하다. 이때는 사용할 때도 #을 붙여서 불러야 한다.
둘 중 아무거나 편한 것을 사용하면 된다.
class Car {
#name: string = "car"; // #으로 작성
color: string;
constructor (color: string) {
this.color = color;
}
start() {
console.log(this.#name); // 대신 사용할 때도 #을 붙여 사용
}
}
class Bmw extends Car {
constructor (color: string) {
super(color);
}
showName() {
console.log(super.#name); // 에러 발생
}
}
요약
public
: 자식 클래스, 클래스 인스턴스 모두 접근 가능
- 작성 안한 것도 모두 public
protected
: 자식 클래스에서 접근 가능private
: 해당 클래스 내부에서만 접근 가능
#변수명
으로 대체 가능