Typescrpt alias path 설정
2011 단어 typescripttypescript
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
Author And Source
이 문제에 관하여(Typescrpt alias path 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gth1123/Typescrpt-alias-path-설정저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)