How to configure path mapping in TypeScript

· Category: TypeScript

Short answer

Use the paths and baseUrl compiler options in tsconfig.json to map import aliases to directories in your project.

Steps

  1. Set baseUrl to . in tsconfig.json.
  2. Add a paths mapping: "@/*": ["src/*"].
  3. Import using the alias: import { helper } from '@/utils/helper';.
  4. Ensure your bundler or runtime also understands the alias, or use tsconfig-paths for Node.js.
  5. Restart your editor and TypeScript service after changing paths.

Tips

  • Path mapping only affects TypeScript compilation; tools like Vite, Webpack, and Jest need their own alias configurations.
  • Use consistent alias conventions across your team to avoid confusion.

Common issues

  • Forgetting to configure the runtime or test environment causes module resolution errors outside of tsc.
  • Relative paths inside paths are resolved relative to baseUrl.