타입스크립트 코드를 보다 보면 다음과 같이 type을 import할 시에 import type을 쓰는 경우와 쓰지 않는 경우를 함께 볼 수 있습니다.
import type { Type } from 'some-module';
import { Type } from 'some-module';이 둘을 언제 어떻게 써야 하는지는 한 모듈에서 타입과 값을 동시에 import해야 할 때 더 헷갈리는데
// import만 쓰는 경우
import { value, Type } from 'some-module';
// import type은 이렇게 써야 하나..?
import { value } from 'some-module';
import type { Type } from 'some-module';두 가지 경우 모두 동작은 하는데 차이가 성능상의 차이인지 순수한 스타일의 영역인지 궁금해서 한 번 검색을 해보았습니다.
importsNotUsedAsValues
이와 관련된 flag가 tsconfig에 있는데, 이 값이 remove(기본값)인 경우 import가 타입만을 참조할 경우 해당 import를 제거하는 방식으로 동작합니다.
이 값을 error로 설정하는 경우 import문을 유지하지만 타입만을 import하는 경우 에러를 표시합니다. 에러가 표시되는 경우 import type을 사용해줘야 합니다. 이 동작은 type만을 import했을 때도 import한 모듈의 side-effect를 발생시키고 싶을 때 유용할 수 있습니다.
마지막으로 preserve를 사용하는 경우 모든 import문을 유지합니다. 마찬가지로 side-effect를 발생시키고 싶을 때 유용할 수 있지만 개인적으로는 좋지 않다고 생각합니다. 따라서 해당 플래그가 remove인 경우와 error로 설정한 경우 두 가지 방안이 있을 것 같습니다.
1. importsNotUsedAsValues="remove"
타입스크립트 개발자가 베스트 케이스라고 한 방법으로, 이 경우 타입만 import 하는 경우 해당 import 문을 제거하므로 import type을 쓸 필요가 아예 없습니다.
2. importsNotUsedAsValues="error"
이 경우 항상 import를 사용하되, 해당 플래그로 인해 에러가 발생하는 경우에만 import type을 사용해줍니다.
타입만 import 하는 경우, 즉 빌드시 제거될 디펜던시를 명시적으로 구분할 수 있다는 장점이 있습니다.
개인적으로 1안과 2안은 개인의 취향 차이라고 생각하고 선호하는 방식을 사용하면 될 것 같습니다.
TypeScript 5.0 이후
TypeScript 5.0에서 verbatimModuleSyntax플래그가 추가되고 importsNotUsedAsValues플래그는 deprecated 되었습니다.
verbatimModuleSyntax플래그가 true이면 import type으로 명시적으로 타입임을 선언해준 구문만 컴파일 시 제거됩니다. 이 경우 IDE의 자동완성의 지원도 받을 수 있어 5.0 이후부터는 verbatimModuleSyntax을 사용하는 것도 좋아보입니다.
ref
https://github.com/microsoft/TypeScript/issues/39861#issuecomment-668131921 https://github.com/microsoft/TypeScript/issues/51479