배경
예전에 팀원이 type전용 import,export를 사용하는걸 강제하는게 어떻겠냐고 말했었다. 단순히 type을 import,export한거를 직관적으로 알 수 있다는 점외에는 필요성이 없어보여 적용하지 않았었는데 이후에 공식문서와 관련 글을 읽다보니 다른 장점도 존재하여 내용을 정리해서 팀원들에게 공유하는 시간을 갖게되었다.
Type-only import,export란?
TypeScript에서는 타입만 가져오거나 내보내고 싶을 때 type 한정자를 사용한다.
// ✅ 타입만 import
import type { User } from './types'
// ✅ 타입만 export
export type { User }이렇게 하면 해당 타입은 컴파일 시점에만 사용되고, 런타임 코드에는 포함되지 않는다.
장점
-
🌳 트리쉐이킹 최적화
타입은 런타임시점에는 필요하지 않기 때문에 컴파일에서만 사용하고 컴파일이 완료된 JS에서는 type-only로 import,export된 타입들은 코드에서 제거 되어 번들 사이즈가 감소한다. -
👀 코드 가독성과 명확성
import type을 쓰면 "이건 타입만 쓰려고 가져온 거야"라는 걸 코드만 봐도 바로 알 수 있다.
협업 시에도 명확한 의도 표현이 가능해지고, 실수로 값을 가져와서 사용하는 상황도 방지할 수 있다.
적용방법
Eslint
// .eslintrc.js
rules: {
'@typescript-eslint/consistent-type-imports': ['error', {
prefer: 'type-imports',
}],
"@typescript-eslint/consistent-type-exports": ["error",{
fixMixedExportsWithInlineTypeSpecifier:true
}]
}prefer: type-imports 는 type을 import할때 type연산자를 강제하는 옵션이다.(기본값)
fixMixedExportsWithInlineTypeSpecifier:true 는 export할때 type과 값을 분리해서 export시키는 옵션이다.
export { A, B } → export type { A }; export { B };
Typescript 5.0v이상 사용시 verbatimModuleSyntax 라는 새로운 옵션 사용가능
// tsconfig.json
{
"compilerOptions": {
"verbatimModuleSyntax": true,
}
}
✅ 이 옵션의 동작 방식
type 한정자를 사용한 import/export → 컴파일 후 JavaScript에서는 완전히 제거됨
type 한정자를 사용하지 않은 import/export → 컴파일 후 그대로 유지됨
기존에는 아래와 같은 옵션들을 모두 설정해줬어야 하는데 5.0이후 부터는 verbatimModuleSyntax옵션 하나만 사용하면된다.
--importsNotUsedAsValues:
타입으로만 쓰인 import에는 반드시 type 한정자를 사용하라고 강제함
--preserveValueImports:
타입처럼 보이더라도 값 import일 수 있으니 import를 제거하지 말라고 설정함
(위 두개 옵션은 deprecated될 예정)
--isolatedModules:
각 파일을 독립적으로 컴파일할 수 있도록 보장함 (Babel컴파일러 사용시 필수)아 그런데 verbatimModuleSyntax옵션을 사용한다는건 module이 CommonJS가 아닌 ESM을 따르겠다는 의미인데 지금 내 프로젝트는 module이 CommonJS이다... 그래서 이 옵션은 당장 나는 사용할 수 없는 옵션이였다
추후에 ESM으로 변경되면 그때 사용할 수 있도록 해야겠다.
마무리
Type-only import,export는 단순히 명확하게 명시하기 위한 것 뿐만 아니라
성능, 안정성, 가독성, 그리고 런타임 오류 방지까지 여러 면에서 프로젝트의 완성도를 높이는 중요한 작업이라고 생각한다.
참고자료
타입스크립트 공식문서(tsconfig)
타입스크립트 공식문서(type-only)
verbatimModuleSyntax옵션 추가
Eslint 공식문서(consistent-type-imports)
타입스크립트 공식문서(isloatedModules)
