💻 Frontend/JS, TS

TypeScript 클래스 접근제한자

hjinn0813 2024. 7. 25. 17:04
728x90

새싹 수업 때부터 학습내용을 내가 이해하기 쉬운 언어로 기록해두는 이유는, 내가 기억력이 좋지 않아서 나중에 까먹었을때 찾아보기 위함이다. 이번에도 TS에서의 클래스를 공부하면서 이거 어디서 본 것 같다고 생각했는데, 알고보니 새싹 수업 당시에 JS 클래스를 배웠던 기억 때문에 그렇게 생각했던 것 같다.😅

(접근제한자는 상반기에 정보처리기사 필기 공부하면서 책에서 얼핏 봤던 것 같다.)

아무튼 혹시 클래스가 뭔지 기억나지 않는다면 아래 링크 참고!

https://hjinn0813.tistory.com/37

 

[코딩온] 프론트엔드 입문 15주차 Day 38 (JS 전개구문, 구조분해할당, 클래스)

이날부터 드디어 전체 교육과정의 세번째 파트가 시작되었다. 이번 파트에서 다루는 내용은 나도 처음 배우는거고, 그동안 팀플 진행하느라 두번째 파트에서 배운 내용도 많이 까먹어서 블로그

hjinn0813.tistory.com


접근 제한자 (Access Modifiers)

클래스에 접근할 수 있는 범위를 지정하는 용도

class Animal {
  /* 속성 타입과 기본값 지정 */
  public name: string = '';
  protected age: number = 0;
  private weight: number = 0;

  /* 객체 생성시 호출되는 생성자 함수 */
  constructor(name: string, age: number, weight: number) {
    this.name = name;
    this.age = age;
    this.weight = weight;
  }

  // method
  public print() {
    console.log(
      `이름: ${this.name}, 나이: ${this.age}, 몸무게: ${this.weight}`
    );
  }
}

① 이렇게 클래스를 만들고 속성의 타입과 기본값부터 지정해준다.

기본값이 있으면 각각의 속성이 어떤 종류의 값을 가질지 명확하게 정의되기 때문에, 개발자가 엉뚱한 타입의 값을 사용하는게 방지되어 타입의 안정성이 향상된다. 또한 객체가 생성될 때, 생성자함수가 속성을 자동으로 초기화시켜서 값이 undefined가 될 수 있는데, 기본값이 있으면 값이 undefined인 경우가 없어서 오류가 생기지 않는다.

  • public : 외부에서 접근 가능, 클래스 바디에서 생략 가능. 클래스의 인스턴스가 생성될 때 빈 문자열로 초기화된다.
  • protected : 해당 클래스와 상속받은 클래스에서 접근 가능
  • private : 해당 클래스 내부에서만 접근 가능 (비공개)

② 그리고 모든 클래스에 반드시 필요한 '생성자함수'를 작성한다.

key는 해당 함수의 인자로 들어있는 name, age, weight이고 값은 생성자함수에서 전달받은 것(this.name)을 사용한다.

③ 클래스의 정보를 출력하기 위한 메서드를 작성한다.

이때 메서드 이름 앞에 public을 붙이면 외부에서 접근 가능하다.

class dog extends Animal {
  print() {
    console.log(`${this.name}은 ${this.age}살입니다.`);
  }
}

const puppy = new Animal('분필', 2, 3);
puppy.print(); // '이름: 분필, 나이: 2, 몸무게: 3'

const puppy2 = new dog('후추', 3, 6);
puppy2.print(); // '후추는 3살입니다.'

console.log(puppy.name); // '분필'
// console.log(puppy.age); -> 상속받은 클래스에서 접근 가능하여 오류 발생
// console.log(puppy.weight); -> 클래스 내부에서만 접근 가능하여 오류 발생

Animal 클래스를 상속받은 dog라는 클래스를 만들었다.

이로 인해서 Animal 클래스에 있던 속성 타입을 dog 클래스에서도 사용할 수 있다.

puppy는 Animal 클래스로 만든 오브젝트여서 print() 메서드로 출력했을 때 몸무게까지 출력되고, puppy2는 dog 클래스로 만들어서 문장이 출력된다.


각각의 속성과 constructor의 매개변수가 동일한 이름을 가지고 있다면, 생성자의 매개변수에 접근제한자를 붙여서 코드를 간결하게 작성할 수 있다. 그러므로 Animal 클래스를 조금 더 간결하게 작성하면 아래 코드처럼 된다.

class Animal2 {
  constructor(
    public name: string = '',
    protected age: number = 0,
    private weight: number = 0
  ) {}

  public print() {
    console.log(
      `이름: ${this.name}, 나이: ${this.age}, 몸무게: ${this.weight}`
    );
  }
}
728x90