클래스 사용법

vanilla js 노션 클론 프로젝트에서 컴포넌트를 생성할 때 생성자 함수를 썼기 때문에
타입스크립트로 생성자 함수를 작성하는 방법을 찾아봤는데 적합한 타입이 없었고, class로 구현하는 방법 밖에 없었다.

클래스

• 필드와 constructor에 프로퍼티를 정의할 수 있다
• constructor에서는 파라미터를 이용해 정의할 수 있고 this를 붙여야한다
• constructor에서 this로 프로퍼티를 정의하려면 필드에 미리 변수가 정의되어있어야 한다
• 메소드는 프로토타입에 정의된다
• 파라미터와 필드에 정의한 변수에 타입을 지정해준다. 메소드는 일반 함수랑 방법이 같음
• 리턴값은 타입 지정 안한다 - 어짜피 항상 객체가 생성되기 때문

인터페이스

• 객체의 타입을 지정하는 또 다른 방법
• 클래스와 비슷한 모양
• extend가능 - 부모 속성이 그대로 자식 내에 복사됨
• type과 interface 둘 다 &기호(intersection)로 합칠 수 있는데
  interface처럼 속성이 복사되는게 아니고 두 객체의 합집합 개념이다.
• 타입 이름 중복 선언 시
  • interface: 같은 객체로 extend된다
    외부 라이브러리 이용 시 type선언을 내가 덮어쓰기(추가), override(수정)하기 편리함
  • type: 에러난다 (일반 객체와 은 개념)
• 확장 시에 중복 속성 선언 시
  • interface: 바로 오류 남
  • type: 선언 시 말고 실행 시 오류남
  • 둘 다 같은 이름, 같은 타입이면 하나로 합쳐줌

다른 사람이 내 코드를 이용하는 상황이 많으면 interface로 유연하게 만드는게 좋다

인스턴스 타입 관련

• 클래스로 생성한 객체(인스턴스)의 타입은 자신을 생성한 클래스가 된다. (클래스 그 자체로 타입이 됨)

export default class App {
  $target: Element;
  Home: Home; // 이 부분
  constructor({ $target }: { $target: Element }) {
    this.$target = $target;
    this.Home = new Home({ $target: this.$target });
    this.route();
  }
  route() {
    const { pathname } = window.location;
    if (pathname === '/') {
      this.Home.route();
    }
  }
}