Typescript에서 상대경로 -> 절대경로 줄일 때 어떻게 하시나요?

JavaScript TypeScript
1

안녕하세요.
상대경로 깊이가 깊어지면 import가 굉장히 보기 어렵게 되는데요…
이걸 간단하게 하고 싶은데, 다들 어떻게 하시는지 궁금합니다.

예를들어 폴더구조가 아래처럼 되어있고,

test
   L abc.ts
index.ts

index.ts

import abc from './test/abc';
console.log(`Hello, ${abc}`);

test/abc.ts

export default 'abc';

라고 할 때에,
./test/abc 를 test/abc로 사용할 수 있는 방법 없을까요?

보통 자바스크립트로 만들 때에는 babel의 module-resolver를 이용하곤 했는데요.

tsconfig.json에서 paths를 이용하면 된다고 되어있어서, 사용하려고 했지만,
Error: Cannot find module 'test/abc' 메시지만 나오네요.

혹시 제가 잘못하고 있는건지…ㅠ

혹시 절대경로로 표시하시려고
다르게 구성해서 쓰시는 분 계시면 이야기 들어보고 싶어서 글을 올립니다.

2

일전에 해당 내용 제 블로그에 작성한 적 있습니다. 아래 링크 한번 확인해보시는건 어떨까요?
https://kanziw.dev/javascript/2019/08/07/apply-absolute-path-in-typescript-server.html

1개의 좋아요
3

https://awesomezero.com/post/module_resolver/

저도 윗분과 같이 블로그에 정리한게 있는데 참고해보세요~

1개의 좋아요
4

두분 말씀 참고하고해서 tsconfig.json의 baseUrl, paths 속성이랑 babel의 module-resolver이용해서 하긴 했는데…
@babel/preset-typescript로 바로 ts파일을 트랜스파일해서 실행하려고하면 이상한 오류들이 나서 (cannot use import statement outside a module)
typescript를 트랜스파일 :arrow_forward: ts 트랜스파일 결과물을 babel로 한 번 더 트랜스파일해서 실행하는 형태로 구성해서 사용하니 되네요…
뭔가 덕지덕지 붙은 느낌이지만… 혹시 다른 분들 노하우 있으면 공유해주세요~

5

저처럼 삽질하신 분이 있을 것같아서…
다시 한 번 더 쓰면…
typescript 트랜스파일 > babel 트랜스파일 말고
@babel/preset-typescript를 이용하는 방법을 한 번 더 시도했는데 잘 되네요 ㅋㅋ
cannot use import statement outside a module 오류는 babel-node 할 때에 --extensions \".ts\" 를 다니까 해결이 되네요… (참고로 "가 아니라 ’ 일경우는 동일 오류 났습니다…)

그런데 @babel/preset-typesciprt만 이용할 경우 non-null assertion operator (!)가 안붙여집니다…이부분에서 오류가 나고 느낌표들 지우고 돌리면 잘되네요ㅎㅎ