클래스

October 03, 2020

클래스 선언

class Person {
  name: string;
  age: number = 0;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  
  sayHello() {
    console.log('안녕하세요.');
  }
}

두개의 멤버 변수를 선언하고, 객체가 생성될 때 호출되는 constructor, 그리고 메서드를 하나 선언했다. age라는 멤버 변수는 초기 값으로 0을 할당하고 constructor에서는 멤버 변수를 초기화하고 있다.

클래스 상속

class Person {
  sayHello() {
    console.log('안녕하세요');
  }
}

class Programmer extends Person {
  fixBug() {
    console.log('버그 수정 완료');
  }
}

const programmer = new Programmer();
programmer.fixBug();
programmer.sayHello();

Person을 상속받는 Programmer라는 클래스를 만들었다. Programmer는 Person에 있는 멤버 변수나 메서드를 사용할 수 있다. programmer라는 객체를 만들면 자기 자신을 가진 메서드 뿐만 아니라 Person에 있는 메서드도 사용이 가능하다.

class Person {
  name: string;
  constructor(name: string){
    this.name = name;
  }
  sayHello() {
    console.log(`안녕하세요 저는 ${this.name}입니다.`);
  }
}

class Programmer extends Person {
  constructo(name: string) {
    super(name);
  }
  
  sayHello() {
    super.sayHello();
    console.log('저는 프로그래머 입니다.');
  }
}

class Doctor extends Person {
  constructor(name: string) {
    super(name);
  }
  
  sayHello() {
    super.sayHello();
    console.log('저는 의사 입니다.');
  }
}

const programmer = new Programmer('홍길동');
programmer.sayHello();

// 안녕하세요 저는 홍길동 입니다.
// 저는 프로그래머 입니다.

Person 클래스를 상속받는 Programmer와 Doctor클래스를 선언했다. 자식 클래스에서 constructor를 작성할 때는 반드시 super를 호출해야한다. super를 호출하면 부모 클래스의 constructor가 호출된다. 만약 super를 호출하지 않으면 에라가 발생한다.

부모 class와 자식 클래스에 sayHello라는 같은 메서드를 선언해주었다. Programmer 객체가 만들어지고 sayHello를 호출하면 부모의 메서드가 아니고 자식의 sayHello메서드가 호출된다. 이 것을 method override라고 한다.

접근 범위 설정

public
- 외부와 상속받는(자녀) 요소에 노출
- 접근 범위를 설정하지 않을 시 기본값으로 설정됨
private
- 외부와 상속받는 요소에 노출하지 않음
- 변수 앞에 # 을 붙여도 같은 역할을 한다. #value = private value
protected
- 상속받는 요소만 노출 (외부는 노출x)

class Person {
  public name: string
  public age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person('홍길동', 23);
console.log(person.name, person.age);

constructor의 매게변수에 접근범위를 설정해주면 자동으로 멤버 변수가 된다.

class Person {
  constructor(public name: string, public age: number) {}
}

const person = new Person('홍길동', 23);
console.log(person.name, person.age);

static 키워드

class Person {
  static adultAge = 20;
  constructor(public name: string, public age: number) {}
  
  sayHello() {
    console.log(`안녕하세요 저는 ${this.name} 입니다.`)
    console.log(
      Person.getIsAdult(this.age) ? '저는 성인이 아닙니다' : '저는 성인입니다',
    )
    
    static getIsAdult(age: number) {
      return Person.adultAge <= age;
    }
  }
}

static 키워드를 이용해서 정적 멤버 변수와 정적 메서드를 정의하고 있다. 정적 멤버 변수는 각 객체와는 상관없이 고정된 값이다. 그렇기 때문에 클래스 이름에 점을 찍어서 접근이 가능하다.

참고 및 출처

타입스크립트 시작하기

Written by@[Ju Chan Hwang]

JUlog에 오신걸 환영합니다🤗 저에 대해 궁금하다면, 👆제 이름을 눌러보세요

GitHub Facebook