Typescript에서 경로 매핑으로 깊게 중첩된 가져오기 방지

Unsplash에 있는 Lukas Beran의 사진

상대 경로가 있는 모듈을 가져오는 것은 코드베이스가 커지고 큰 파일을 더 작은 재사용 가능한 모듈로 분할하기 시작함에 따라 매우 어려울 수 있습니다. 파일이 매우 깊게 중첩되어 폴더 구조를 보고 당황하게 됩니다. 다음 폴더 구조를 고려하십시오.

root/
   tsconfig.json
   types.d.ts
   .env
   src/
      server.ts
      database/
      models/
      routes/
         posts/
         comments/
      controllers/
         posts/
         comments/
         media/
      utils/
         database/
            seed.ts
         workers/
            publisher.ts

src/utils/workers 의 모듈에서 포스트 컨트롤러로 함수를 가져오려고 한다고 가정해 보겠습니다. 이미 엉망진창인 import { function } from "../../utils/workers/publisher.ts" 입니다. 파일 위치가 변경되고 해당 파일을 가져온 모든 곳에서 업데이트해야 하는 경우 이는 더욱 복잡해질 수 있습니다.

이를 해결하는 한 가지 방법은 TypeScript 경로 매핑을 사용하는 것입니다. 다음과 같이 paths 아래의 tsconfig.json에 compilerOptions 필드를 선언하여 지정된 경로에 매핑하는 tsconfig에서 네임스페이스를 정의합니다.

{
   "compilerOptions": {
      "baseUrl": ".",
      "paths": {
         "@workers/*": ["src/utils/workers/*"],
         "@mediaControllers/*": ["src/controllers/media/*"]
      }
   }
}

여기에서 baseUrl을 경로 맵을 만드는 데 필요한 루트 디렉터리로 설정합니다. "src/utils/workers/"경로에 매핑되는 네임스페이스 "@workers"를 생성합니다. '@' 기호는 필요하지 않으며 쉽게 눈에 띄고 네임스페이스로 인식할 수 있도록 하기 위해 있습니다.

이제 workers 에서 모듈을 가져오려면 네임스페이스를 사용하면 됩니다. 즉 import { function } from "@workers/publisher.ts" . 더 이상 상대 경로에 대해 걱정할 필요가 없으며 원래 위치에서 파일을 이동할 때 단순히 경로 맵을 업데이트하기만 하면 됩니다. 그래서 문제 해결! 😁️.

TypeScript는 baseUrl에 상대적인 경로를 해석하므로 경로 맵을 생성할 때 이를 염두에 두십시오.