[캡틴판교 TS] 섹션 9. 클래스

클래스(Class) 란?

ES6에서 새롭게 도입되었다.

프토로타입과 클래스 관계

다음과 같이 method 와 class 로 선언한 부분은 동일한 내용이다.

// method
function Person(name, age) {
  this.name = name;
  this.age = age;
}
let capt = new Person("캡틴", 100);

class Person {
  // 클래스 로직
  constructor(name, age) {
    console.log("생성 되었습니다");
    this.name = name;
    this.age = age;
  }
}

let seho = new Person("세호", 30); // 생성 되었습니다
console.log(seho); // Person { name: '세호', age: 30 }

TypeScript Class

readonly

클래스 속성에서 readonly 키워드를 사용하면 값을 변경할 수는 없고, 읽을 수만 있다.

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

let john = new Developer("John");
john.name = "John"; // error! name is readonly.

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

class Developer {
  readonly name: string;
  constructor(readonly name: string) {
  }
}

Accessor

타입스크립트는 객체의 특정 속성의 접근과 할당에 대해 제어할 수 있다.

class Developer {
  name: string;
}

const josh = new Developer();
josh.name = 'Josh Bolton';

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

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

  set name(newValue: string) {
    if (newValue && newValue.length > 5) {
      throw new Error('이름이 너무 깁니다');
    }
    this.name = newValue;
  }
}
const josh = new Developer();
josh.name = 'Josh Bolton'; // Error
josh.name = 'Josh';

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

Abstract Class

추상 클래스(Abstract Class)는 인터페이스와 비슷한 역할을 하면서도 조금 다른 특징을 갖고 있다.

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

abstract class Developer {
  abstract coding(): void; // 'abstract'가 붙으면 상속 받은 클래스에서 무조건 구현해야 함
  drink(): void {
    console.log('drink sth');
  }
}

class FrontEndDeveloper extends Developer {
  coding(): void {
    // Developer 클래스를 상속 받은 클래스에서 무조건 정의해야 하는 메서드
    console.log('develop web');
  }
  design(): void {
    console.log('design web');
  }
}
const dev = new Developer(); // error: cannot create an instance of an abstract class
const josh = new FrontEndDeveloper();
josh.coding(); // develop web
josh.drink(); // drink sth
josh.design(); // design web

---

🧸 Feelings …

클래스는 최상위에 타입을 정의하고 변수에도 타입을 지정해야 한다! 총 2번!! 기억하기

Reference

[캡틴판교 TS] 타입스크립트 입문 - 기초부터 실전까지
타입스크립트 핸드북

본 포스팅은 캡틴판교 강사님의 타입스크립트 입문 - 기초부터 실전까지 강의를 수강하고 난 후, 본인의 주관적인 견해에 의하여 작성되었습니다.