TypeScript: Classes Ep.1

What are Classes


클래스 Class

  • object를 만드는 blueprint (청사진, 설계도)
  • 클래스 이전에 object를 만드는 기본적인 방법은 function
  • JavaScript에도 class는 es6부터 사용 가능 (대신 기능이 부족)
  • 타입스크립트는 OOP(객체 지향 프로그래밍)을 위한 초석
  • TypeScript에서는 클래스도 사용자가 만드는 타입의 하나

Quick Start - class


  • class 키워드를 이용하여 클래스를 만든다.
  • class 이름은 보통 대문자를 이용한다.
  • new를 이용하여 class를 통해 object를 만든다.
  • constructor를 이용하여 object를 생성하면서 값을 전달한다. constructor() → 밖에서 들어오는 데이터를 설정한다.
  • this를 이용해서 만들어진 object를 가리킨다.
  • JS로 컴파일 되면 es5의 경우 function으로 변경된다. js에서는 class를 es6부터 사용이 가능하다. es5까지는 ts파일의 class를 js로 변환하면 function으로 변환한다.

constructor & initialize


  • 생성자 함수가 없으면, 디폴트 생성자가 불린다.
  • 프로그래머가 만든 생성자가 하나라도 있으면, 디폴트 생성자는 사라진다.
  • strict 모드에서는 프로퍼티를 선언하는 곳 또는 생성자에게 값을 할당해야 한다.
  • 프로퍼티를 선언하는 곳 또는 생성자에게 값을 할당하지 않는 경우에는 !를 붙여서 위험을 표현한다.
  • 클래스의 프로퍼티가 정의되어 있지만, 값을 대입하지 않으면 런타임에 undefined된다.
  • 생성자에는 async를 설정할 수 없다. new 할때는 awit 처리 할 수 없고 별도의 함수를 만들어서 해당 함수를 awit 처리하는 방식으로 값을 초기화한다. 이런 방식으로 초기화 할때는 느낌표를 붙여서 뒤늦게 초기화 된다는 것을 프로그래밍 적으로 표시해야 한다.

접근 제어자 (Access Modifiers)


  • 접근 제어자는 public, private, protected가 있다.
  • 설정하지 않으면 public(외부 접근 가능)이다.
  • 클래스 내부의 모든 곳(생성자, 프로퍼티, 메소드)에 설정이 가능하다.
  • private로 설정하면 클래스 외부에서 접근할 수 없다.
  • 자바스크립트에서 private를 지원하지 않아 오랫동안 프로퍼티나 메서드 이름 앞에 _를 붙여서 표현했다. 이것은 일종의 습관으로 특별한 의미가 있는 것은 아니다.

initialization in constructor parameters


생성자 name과 age에 접근 제어자를 추가하면 this.name등의 코드를 적지 않아도 된다. (불필요한 코드 줄이기)

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

}

const p1 = new Person("mark",39);
console.log(p1)

Comments