typescript: path aliases

[papsavas]

• after Migration to typescript #101

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

[papsavas]

i would suggest such feature is accompanied by the deletion of hooks/index.ts since it's one more file to maintain when adding new hooks. Instead each hook will be imported as:

import { useDepartments } from "@hooks/useDepartments"