Class

ES6, Typescript Class의 차이점

Typescript의 Class는 이전 포스팅에서 소개한 ES6 Class와 문법적으로 큰 차이가 없지만, 다음과 같은 차이점이 존재한다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

위 코드를 .ts 확장자 파일에 작성하면 다음과 같이 Person Class에 name속성이 존재하지 않아 에러가 발생한다.

즉, Typescript의 Class는 멤버 변수, 생성자에 타입을 지정해야 한다.

class Person {
  name: string;
  age: number;

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

readonly

Typescript Class 속성에 readonly 키워드를 사용하면 아래와 같이 해당 멤버변수에 한해 접근만 가능하게 한다.

즉, readonly 키워드를 사용한 Class의 멤버변수는 값을 수정할 수 없다.

class Person {
  readonly name: string;
  
  constructor(theName: string) {
      this.name = theName;
  }
}

let mirrer = new Person("mirrer");
mirrer.name = "Change Mirrer"; // error! name is readonly.

이처럼 readonly를 사용하면 생성자(constructor) 함수에 초기 값 설정 로직을 넣어줘야 하므로 다음과 같이 인자에 readonly 키워드를 추가해서 코드를 줄일 수 있다.

class Person {
  readonly name: string;
  
  constructor(readonly name: string) {
  	// ...
  }
}

Accessor

Typescript는 객체의 특정 속성의 접근과 할당에 대해 제어할 수 있다.

이를 위해선 해당 객체가 Class로 생성된 객체여야 한다.

class Person {
  name: string;
}

const mirrer = new Person();
mirrer.name = 'Chage Mirrer';

위 코드는 Class로 생성한 객체의 name 속성을 변경한다.

해당 과정에서 name 속성에 제약 사항을 추가하고 싶다면 아래와 같이 get과 set을 활용한다.

get만 선언하고 set을 선언하지 않는 경우에는 자동으로 readonly로 인식

class Person {
  private name: string;
  
  get name(): string {
    return this.name;
  }

  set name(newValue: string) {
    if (newValue && newValue.length > 5) {
      throw new Error('이름은 최대 5글자만 입력해주세요.');
    }
    this.name = newValue;
  }
}

const mirrer = new Person();
mirrer.name = 'Change Mirrer'; // Error
mirrer.name = 'MR';

Abstract Class

추상 클래스(Abstract Class)는 Interface와 비슷한 역할을 하지만 조금 다른 특징을 가지고 있다.

추상 클래스는 특정 클래스의 상속 대상이 되는 클래스이며 좀 더 상위 레벨에서 속성, 메서드의 모양을 정의한다.

abstract class Person {
  // 'abstract'를 상속 받은 클래스는 무조건 구현
  abstract coding(): void; 
  drink(): void {
    console.log('drink sth');
  }
}

class Mirrer extends Person {
  // 추상 클래스로 부터 상속 받아 반드시 정의
  coding(): void {    
    console.log('develop web');
  }
  design(): void {
    console.log('design web');
  }
}

const person = new Person(); // error: cannot create an instance of an abstract class
const mirrer = new Mirrer();

mirrer.coding(); // develop web
mirrer.drink(); // drink sth
mirrer.design(); // design web

참고 자료

TypeScript: JavaScript With Syntax For Types.
React TypeScript Tutorial for Beginners - Codevolution
타입스크립트 입문 - 기초부터 실전까지 - 장기효