업무 중 눈에 띄는 리뷰
오늘 회사 업무를 하다가 PR을 날렸다.
해당 코드는 typescript였고, type을 import 하고 있었다.
PR이 달렸다.
???: 이거 type only import로 변경해주실 수 있나요?
나는 type import가 뭔지 몰랐고, 왜 type import를 사용해야 하는지 몰랐다.
하지만 빠르게 머지를 하고 싶었던 나는 type import 사용법만 검색해서 적용하고 다시 리뷰 요청을 했다.
이런 과오를 반성하고자, type only import/export는 무엇인지, 쓰면 뭐가 좋은지 정리하도록 하겠다.
type only import/export는 무엇인가?
우선 이 문법은 typescript 3.8에 나온 아주 유명한 친구다. (난 왜 몰랐지 젠장)
말 그대로 type만 import/export 하는 문법이다.
이 문법을 쓰면 런타임 과정에서 사용되지 않아도 되는 import를 구분할 수 있게 된다.
그리고 사용되지 않는다고 판단된 import/export(type, interface의 import/export)는 컴파일 결과에서 제외된다.
혹시 모를 에러를 방지할 수 있고, 빌드 결과물도 줄어든다.
그리고 사람도 현재 import/export 해오는 코드가 type, interface인지 실제 변수,함수인지 구분할 수 있기도 하다.
type only import/export는 왜 필요한가?
기존의 typescript에서는 코드에 구분없이 import/export 했다.
import { Money } from 'Bank';
// 돈을 써서 영수증이 나오는 로직..
export { Bill };이런 방식에는 문제가 있다.
위에서 말했던 혹시 모를 에러가 터지는데, type을 import/export 할 때 문제가 생긴다. 이 링크를 보자.
해당 링크에서는 tsc build 결과물이 interface나 type의 import 구문이 그대로 남아서 webpack build 시에 warning이 발생 하는 이슈의 링크이다. (꽤 유명했는데 난 또 몰랐음)
예를 들자면, typescript로 아래의 코드를 짠다.
import { MoneyType } from 'Bank'; // type MoneyType = '$' | '₩' ...;
const Money: MoneyType = '1$';
// ...위 코드처럼 짰는데, webpack에서 아래처럼 에러가 나는 것이다.
$ WARNING in Money.ts
$ 'MoneyType' was not found in 'Bank'뭔가 이상하지 않은가? tsc에서 build가 되면 분명 모든 코드가 javascript가 된다.
하지만 가끔 위 에러처럼 type이나 interface의 import가 남는 경우가 생겼다.
type only import/export를 하면 런타임에서 확실하게 해당 코드를 제외시키기 때문에 해당 에러가 일어나지 않는다.
그리고 개인적으로 type, interface에다가 type only용으로 import/export 하는게 가독성이 더 좋은 것 같다.
끝.
오늘도 행복한 하루 되시길.
출처
https://stackoverflow.com/questions/61412000/do-i-need-to-use-the-import-type-feature-of-typescript-3-8-if-all-of-my-import
https://javascript.plainenglish.io/leveraging-type-only-imports-and-exports-with-typescript-3-8-5c1be8bd17fb
https://github.com/webpack/webpack/issues/7378
