TypeScript declarations 파일에 Webpack Alias 적용하기

 

 

 

https://im-developer.tistory.com/186?category=879485

Webpack, React, Typescript, Jest 환경에서 Alias 적용하기 (절대 경로 import)

 

위 포스팅에서 Webpack과 TypeScript 환경에서 어떻게 Webpack Alias를 적용하는지 알아보았다.

저대로 잘 적용해서 사용하고 있었는데 개발 중에 문제가 하나 발견되었다.

 

foo.ts와 bar.ts라는 파일이 있다고 가정해보자.

그리고 foo.ts 파일에서 interface를 선언한 후 export 해준다.

 

 

foo.ts

interface Foo {
  sample: string;
}

export { Foo };

 

그리고 bar.ts 파일에서 Foo를 import한 후에 다시 re-export 해주는 상황을 생각해보자.

 

 

bar.ts

import { Foo } from '@/a';

// ...

export { Foo };

 

tsconfig.json에 'declarations' property를 true로 설정하고

위 파일들을 TypeScript Compiler로 컴파일하면 declarations file들이 생성된다.

 

문제는 d.ts 파일들에 alias 설정이 적용이 안된다는 점이다.

 

 

bar.d.ts

import { Foo } from "@/a";
// ...
export { Foo };

 

즉, 위와 같이 '@'가 상대 경로로 변환되지 않고 그대로 생성되어

Foo 모듈을 찾지 못하는 에러가 발생한다.

 

 

 

How to solve?

위 문제를 해결하기 위해 여기 저기를 찾아다니다가 ttypescript 와 typescript-transform-paths 라이브러리를 발견했다.

 

 

 

1. 라이브러리 설치 후, tsconfig.json에 아래 설정을 추가한다.

 

"plugins": [{
  "transform": "typescript-transform-paths",
  "afterDeclarations": true
}],

 

2. package.json에 tsc 를 ttsc 로 바꿔준다.

 

"build": "ttsc -p tsconfig.json && webpack",

 

이제 d.ts 파일들의 alias가 정상적으로 compile된다! 

 

import { Foo } from "./a";
// ...
export { Foo };

 

 

Reference:

https://medium.com/@joshuaavalon/webpack-alias-in-typescript-declarations-81d2b6c0dcd6

Webpack alias in TypeScript declarations