23.07.14(금)

하루 요약

1. ~20시 : OFF
2. 20시 ~ 22시 : Gloddy 개발, Type-only import/export 공부

오늘 한 일

오늘 배운 내용

1. Type-only import/export

• Type-only import 예시

  import type {MyType} from './types';

• Type-only export 예시

  type MyType = {
    name:string,
    age:number,
  };
  export type {MyType};

• 장점

  1. 코드 가독성 향상 : type만을 import하$$는 경우, 코드의 가독성이 향상되고 코드량이 줄어들어 유지보수에 용이
  2. 불필요한 모듈 로딩 방지 : 전체 모듈을 import 하는 경우, 불필요한 모듈도 함께 로딩되어 성능 저하 초래할 수 있음. 타입만을 import하는 경우, 필요한 타입만을 로드하여 성능 개선에 도움
  3. 컴파일 속도 향상
  4. 타입 안정성 : 타입 호환성 검사를 보다 엄격하게 수행

• 주의 사항

  1. interface는 Type-only export 불가
  2. 타입의 충돌 문제 : 같은 타입 이름을 가진 다른 모듈에서 import/export할 경우 타입 충돌 문데
  3. 외부 모듈에서의 type은 import 사용 불가

고민한 점

import Sheet, { SheetRef } from 'react-modal-sheet';

위 코드에서 type import를 하고 싶어서

import Sheet, { type SheetRef } from 'react-modal-sheet';

을 작성하였는데 prettier에 의해

import Sheet, { SheetRef, type } from 'react-modal-sheet';

로 자꾸 수정이 된다.

그래서, Type-only import/export에 대해 추가로 공부해보니 외부 라이브러리는 type import/export가 불가능하다고 한다.