컴포넌트 기반의 Typescript를 토이프로젝트를 하기 위해 클래스 관련 공부를 했다.
vanilla js 노션 클론 프로젝트에서 컴포넌트를 생성할 때 생성자 함수를 썼기 때문에
타입스크립트로 생성자 함수를 작성하는 방법을 찾아봤는데 적합한 타입이 없었고, class로 구현하는 방법밖에 없는 것 같았다.
클래스는 아직 거의 사용해본 적이 없고 너무 어려워서 좀 회피했었는데 이번 기회에 제대로 마스터해야겠다 ..!
클래스
- 필드와 constructor에 프로퍼티를 정의할 수 있다
- constructor에서는 파라미터를 이용해 정의할 수 있고 this를 붙여야한다
- constructor에서 this로 프로퍼티를 정의하려면 필드에 미리 변수가 정의되어있어야 한다
- 메소드는 프로토타입에 정의된다
- 파라미터와 필드에 정의한 변수에 타입을 지정해준다. 메소드는 일반 함수랑 방법이 같음
- 리턴값은 타입 지정 안한다 - 어짜피 항상 객체가 생성되기 때문
인터페이스
- 객체의 타입을 지정하는 또 다른 방법
- 클래스와 비슷한 모양
- extend가능 - 부모 속성이 그대로 자식 내에 복사됨
- type과 interface 둘 다 &기호(intersection)로 합칠 수 있는데
interface처럼 속성이 복사되는게 아니고 두 객체의 합집합 개념이다.
- 타입 이름 중복 선언 시
- interface: 같은 객체로 extend된다
외부 라이브러리 이용 시 type선언을 내가 덮어쓰기(추가), override(수정)하기 편리함
- type: 에러난다 (일반 객체와 은 개념)
- 확장 시에 중복 속성 선언 시
- interface: 바로 오류 남
- type: 선언 시 말고 실행 시 오류남
- 둘 다 같은 이름, 같은 타입이면 하나로 합쳐줌
다른 사람이 내 코드를 이용하는 상황이 많으면 interface로 유연하게 만드는게 좋다