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