[TypeScript ] #5 클래스 타입

1Hoit·2023년 5월 30일
0

TypeScript

목록 보기
5/7
post-thumbnail

자식클래스 내부에선 참조할 수 있으나 클래스 인스턴스로는 참조할 수 없다.

클래스 타입

class Car{
  //color:string; // 멤버변수 선언
  constructor(color: string){
    this.color = color; // 위에 멤버변수를 선언하지 않으면 에러가난다.
  }
  start() {
    console.log("start");
  }
}

const bmw = new Car("red");

만약 위의 멤버변수를 미리 선언하지 않는 방법도 있다.
접근제한자 또는 readonly 키워드를 사용하면 된다.

class Car{
  //color:string; // 멤버변수 선언
  constructor(public color: string){
    //        readonly color:string 으로도 가능  
    this.color = color; 
  }
  start() {
    console.log("start");
  }
}

const bmw = new Car("red");

접근 제한자 (Access modifier)

타입스크립트에서는 접근 제한자를 지원한다.
public, private, protected 3 종류가 있다.

각 특징
public : 자식 클래스, 클래스 인스턴스에서 모두 접근 가능
private : 자신의 클래스 내부에서만 접근 가능
protected : 자식 클래스에서 접근 가능, 클래스 인스턴스에서는 접근 불가

1) public 인 경우

class Car{
  name:string = "car";  // 자동으로 public 이다
  color:string;
  constructor(color: string){
    this.color = color; 
  }
  start() {
    console.log("start");
  }
}

class Bmw extends Car {
  constructor(color:string){
    // Car에서 상속받은 color를 사용해야 하므로
    // super(color) 없다면 에러 발생
    super(color);  
  }
  showName() {
    console.log(super.name);
  }
}

const z4 = new Bmw("red");
  • Car 클래스의 name 과 color는 자동으로 public 이다.
  • public 이므로 자식클래스나 클래스 인스턴스에서 사용이 가능하다.

2) private 인 경우

class Car{
  private name:string = "car"; 
  //#name:string = "car"; 
  color:string;
  constructor(color: string){
    this.color = color; 
  }
  start() {
    console.log("start");
    console.log(this.name); // name은 Car 클래스 내부에서만 사용가능
  }
}

class Bmw extends Car {
  constructor(color:string){
    super(color);  
  }
  showName() {
    console.log(super.name); // Error: name이 private므로 
  }
}

const z4 = new Bmw("red");
  • Car 클래스의 멤버변수 name을 private 선언
    즉, Car 클래스 내부에서만 사용 가능
  • Car 클래스의 멤버변수 name이 private이므로
    자식 클래스 Bmw에서 name을 사용할 수 없으므로 에러
  • private 대신 #으로 표현해도 기능은 같음
    #name 과 같이 표현, 단 사용하는 곳에서도 #name 으로 맞춰야한다.

3) protected 인 경우

class Car{
  protected name:string = "car"; 
  color:string;
  constructor(color: string){
    this.color = color; 
  }
  start() {
    console.log("start");
    console.log(this.name); 
  }
}

class Bmw extends Car {
  constructor(color:string){
    super(color);  
  }
  showName() {
    console.log(super.name); // 사용가능
  }
}

const z4 = new Bmw("red");
console.log(z4.name); //Error: 인스턴스에서 접근 불가
  • protected 인 경우
    자식클래스에서는 접근이 가능하지만
    인스턴스에서는 접근이 불가능하다.

readonly / static 키워드 (정적 멤버 변수)

class Car{
  readonly name:string = "car"; 
  color:string;
  //readonly인 name을 바꾸고 싶다면 constructor에서 진행
  static wheels = 4; // 정적 멤버 변수 선언
  constructor(color: string, name: string){
    this.color = color;
    this.name = name;
  }
  start() {
    console.log("start");
    console.log(this.name); 
    console.log(Car.wheels); //클래스 명으로 정적 멤버 변수 접근
  }
}

class Bmw extends Car {
  constructor(color:string, name:string){
    super(color,name);  
  }
  showName() {
    console.log(super.name); 
  }
}

const z4 = new Bmw("red","myCar");
z4.name = "zzz4"; //Error : readonly 속성이므로
console.log(Car.wheels); // 정적 멤버 변수 접근 
  • name이 readonly 이므로 바꾸고 싶다면 name이 있는 클래스
    내부의 constructor 에서 name을 변경해줘야한다.

  • static 을 써주면 정적 멤버 변수를 만들 수 있다.
    또한 접근 시에는 Class명.멤버변수 로 접근 가능하다.
    위에서는 Car.wheels 로 접근


추상 class

abstract class Car{
  color:string;
  constructor(color: string){
    this.color = color;
  }
  start() {
    console.log("start");
  }
  abstract doSomething():void; //추상 메서드 선언
}

// const car = new Car("red"); // Error

class Bmw extends Car {
  constructor(color:string){
    super(color);  
  }
  doSomething(){ // 추상 메서드 구현
    alert('3');
  }

}

const z4 = new Bmw("red");
  • 추상 클래스는 클래스 키워드 앞에 abstract 를 붙여 만듦

  • 추상 클래스는 new 키워드를 통해 인스턴스 생성 불가!
    상속을 통해서만 사용이 가능

  • 추상 클래스 내부에 추상 프로퍼티나 메서드는 이름만 선언해주고 상속 받은 쪽에서 구체적인 구현을 해주어야 한다.

    위와 같이 한다면 추상 프로퍼티나 메서드를 상속받아 만든 수많은 객체들이 동일한 이름의 메서드를 갖지만 구체적인 기능은 가지각색일 수 있게 되는 것이다!

profile
프론트엔드 개발자를 꿈꾸는 원호잇!

0개의 댓글

관련 채용 정보