타입스크립트는 타입을 지정할 수 있는 장점 외에도, 자바스크립트에서 본래 쓸 수 없는 문법을 지원해 주기도 합니다.
자바 코드를 한번이라도 훑어 봤다면 들어 봤을 public, private, protected, static 등의 접근 제어자와 키워드를 타입스크립트에서도 사용이 가능합니다. 😮

접근 제어자

접근 제어자란, 이름 그대로 외부에서 클래스에 대한 값(클래스, 변수, 메서드 등) 접근할 수 있는 권한을 제어해주는 키워드를 말합니다. 블로그 카테고리의 공개/비공개 설정을 하듯이요. 👀
접근 제어자를 사용하면 예기치 못한 외부의 접근으로부터 데이터를 보호할 수 있으며, 정보 은닉(캡슐화) 가 가능합니다.
개발자가 의도하지 못한 오동작을 방지하여 개발 안정성을 높일 수 있습니다.

자바스크립트에서는 기술 면접 단골 질문, '클로저'를 통하여 구현이 가능합니다. 미리 지정해 준 메소드만으로 조작이 가능하다는 점에서는 React의 useReducer hook과도 비슷하다고 느껴지네요! 🐒

public

class Cat {
  public name;
  constructor(nameParam: string) {
    this.name = nameParam;
  }
}

let cat = new Cat('yaong');
console.log(cat); // 'yaong'

cat.name = 'meow';
console.log(cat); // 'meow'

public 접근 제어자는 클래스 안의 속성을 어디에서든 수정 가능하게 만들어 주는 키워드입니다.
사실 아무 접근 제어자를 붙이지 않아도 public을 붙인 것과 동일하게 동작하는데, 이는 public이 생략된 형태로 자동 부여되기 때문입니다.
클래스 내 함수에도 이 접근 제어자를 부여할 수 있습니다.

private

class Cat {
  public name;
  private color;
  constructor(nameParam: string, colorParam: string) {
    this.name = nameParam;
    this.color = colorParam;
  }
}

let cat = new Cat('yaong', 'white');
cat.color = 'black'; // 'color' 속성은 private이며 'Cat' 클래스 내에서만 액세스할 수 있습니다.
console.log(cat);

private 접근 제어자는 해당 속성을 class 안에서만 수정 및 사용이 가능하도록 접근을 제한해 주는 역할을 합니다. public과 마찬가지로, 클래스 내 함수에도 이 접근 제어자를 부여할 수 있습니다.

private 로 설정해 준 'color' 속성을 클래스 외부에서 변경하려 하니 에디터에 에러가 출력되는 모습입니다.

private로 선언해 준 속성을 클래스 외부에서도 변경하고 싶어요. 🙎

클래스 내부에 private로 지정해 준 속성을 변경해 주는 함수를 만들면 됩니다.

class Cat {
  public name;
  private color;

  constructor(nameParam: string, colorParam: string) {
    this.name = nameParam;
    this.color = colorParam;
  }

  setColor(colorParam: string) {
    this.color = colorParam; // 클래스 내부이므로 속성 변경 가능!
    return;
  }
}

let cat = new Cat('yaong', 'white');
console.log(cat); // Cat {name: 'yaong', color: 'white'}
cat.setColor('black');
console.log(cat); // {name: 'yaong', color: 'black'}

protected

protected 는 해당 클래스와, 해당 클래스를 상속받은 클래스에서만 속성에 접근할 수 있도록 제한해 줍니다.

class Cat {
  public name;

  constructor(nameParam: string) {
    this.name = nameParam;
  }

  protected meow(sound: string) {
    console.log(sound);
    return;
  }
}

class MyCat extends Cat {
  constructor() {
    super('bangul');
  }

  color: 'white and black';
  age: 5;
  public meow2(){
    this.meow('string');
  }
}

new MyCat().meow2();
new MyCat().meow(); // error

private 키워드보다는 강제성이 약하기 때문에, 상속한 클래스에서 오버라이딩이 가능하며 이 때 protected 키워드를 붙여주지 않으면 외부에서도 클래스 외부에서도 접근이 가능하게 됩니다.

class Cat {
  public name;

  constructor(nameParam: string) {
    this.name = nameParam;
  }
  protected meow(sound: string) {
    console.log(sound);
    return;
  }
}

class MyCat extends Cat {
  constructor() {
    super('bangul');
  }

  color: 'white and black';
  age: 5;
 meow(sound: string){
   console.log(sound);
  }
}

new MyCat().meow('yaong'); // 접근 가능

참고자료

• https://codingapple.com/course/typescript-crash-course/ (빠르게 마스터하는 타입스크립트)
• Do it! 첫코딩 (이지스퍼블리싱, 정동균)
• https://medium.com/hcleedev/web-typescript%EC%9D%98-public-protected-private-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-31e16bc11d32 (Web: TypeScript의 public, protected, private 알아보기)