Typescrpt alias path 설정

Typescrpt alias path 설정하기(tsconfig.json)

예를 상대경로로 ../../hooks 와 같이 import 해오는 것을
절대 경로로 @hooks 처럼 깔끔하게 import할 수 있는 설정이다

tsconfig.json에서

{
  "compilerOptions": {
    // ...
    "baseUrl": "./",
    "paths": {
      "@styles": ["src/styles/*"],
      "@hooks": ["src/hooks/index"],
      "@hooks/*": ["src/hooks/*"]
    }
  },
  // ...
}

• compilerOptions의 baseUrl을 설정해야 alias paths를 설정할 수 있다

index를 사용해서 export하는 파일들을 관리하고 싶다면

export const useContents = () => { ... }

위와 같이 함수를 직접 export를 하고

// index.ts
export * from './useContents'

index 파일을 통해서 import를 할 때

"@hooks": ["src/hooks/index"], path 사용할 수 있다

개인적으론 export default를 선호하기 때문에

export default useContents

"@hooks/*": ["src/hooks/*"]와 같이 와일드 카드 경로를 이용해서 import하는 편이다

참고

• https://stackoverflow.com/questions/38601592/typescript-import-path-alias
• https://github.com/TaehwanGo/nextjs-playground/commit/7f8388690b3a084c5d98bc48475ef375278963e6