How to setup typescript aliases

Setup aliases in typescript config tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@ui/*": ["./components/common/ui/*"],
      "@pages/*": ["./pages/*"],
      "@hooks/*": ["./hooks/*"],
      "@api/*": ["./api/*"],
      "@utils/*": ["./utils/*"],
    }
  }
}

This allows us to use path aliases like

import { Button } from '@/components/Button';

Install tsconfig-paths

npm install tsconfig-paths

Update package.json to use it

   "scripts": {
     "start": "nodemon --ext ts --exec 'tsc && ts-node -r tsconfig-paths/register src/index.ts'",
     "build": "tsc",
     "serve": "nodemon --ext js --exec 'node -r tsconfig-paths/register dist/index.js'"
   }

---

References:

• https://blog.logrocket.com/using-path-aliases-cleaner-react-typescript-imports/