Import Aliases in Typescript

January 19th, 2024

Typescript provides a way of aliasing your import statements so that you don’t have to type out a long and error-prone relative path every time you want to import something. You can do it like this, in your tsconfig.json:

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

Note: the baseUrl is required, otherwise you may run into Cannot find module errors, even if you editor insists it can find the path.

If you prefer a visual, here's a link to a diagram