typescript: path aliases #124
Description
Problem
Many imports are relative which leads to the following code:
import { useMyHook } from "../../../hooks/myHook"Solution
Path aliases allow you to specify certain path areas for cleaner imports
//tsconfig.json
{
"compilerOptions:"{
"paths": {
"@hooks/*": ["./src/hooks/*"],
}
}
}import { useMyHook } from "@hooks/myHook"Note
@is arbitrary. Some projects use~
Note
you can also alias as follows
{
"compilerOptions:"{
"paths": {
"@/*": ["./src/*"],
}
}
}import { useMyHook } from "@/hooks/myHook"Important
if a combination of both aliasing root and sub-paths is decided, make sure to put inner paths above their outer in tsconfig.ts to receive shorter path priority when auto-importing