[TIL] 0120

yoon Y·2022년 1월 24일
0

2022 - TIL

목록 보기
19/109

컴포넌트 기반의 Typescript를 토이프로젝트를 하기 위해 클래스 관련 공부를 했다.
vanilla js 노션 클론 프로젝트에서 컴포넌트를 생성할 때 생성자 함수를 썼기 때문에
타입스크립트로 생성자 함수를 작성하는 방법을 찾아봤는데 적합한 타입이 없었고, class로 구현하는 방법밖에 없는 것 같았다.
클래스는 아직 거의 사용해본 적이 없고 너무 어려워서 좀 회피했었는데 이번 기회에 제대로 마스터해야겠다 ..!

클래스

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

인터페이스

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

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

profile
#프론트엔드

0개의 댓글