Path mapping & module resolution
Configure path aliases with baseUrl/paths, understand how TS resolves modules, and avoid common pitfalls.
Path mapping & module resolution is a free TypeScript Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Intro
Goal: Replace long relative imports with path aliases and understand TypeScript`s module resolution rules to keep imports clean.
tsconfig paths
Set baseUrl (project root for non-relative imports) and map aliases in paths. Keys can use * globs.
// file: tsconfig.json (excerpt)
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"],
"@components/*": ["components/*"]
}
}
}Use alias
Import using the alias exactly as declared (e.g., @utils/date). TypeScript resolves to the mapped path in src/.
// file: src/app.ts
import { formatDate } from "@utils/date";
import Button from "@components/Button";
console.log(formatDate(new Date()));
const btn = new Button();Resolution strategy
Resolution depends on module (Node, NodeNext, Bundler). TS checks file extensions, package.json exports/types, then falls back to node_modules.
// Resolution order sketch (NodeNext/Node):
// 1) Exact file: .ts/.tsx/.d.ts/.js
// 2) Index files: index.ts / index.js
// 3) package.json exports / types
// 4) paths & baseUrl fallbacks
// 5) node_modules lookup (upwards)
export const note = "Resolution depends on module setting (Node, NodeNext, Bundler).";Bundler alignment
Important: TS knows aliases for type-checking, but your bundler/runtime must also map them (e.g., Vite/Webpack/tsconfig-paths for ts-node).
// Example: vite.config.ts (alias for runtime)
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
resolve: {
alias: {
"@utils": path.resolve(__dirname, "src/utils"),
"@components": path.resolve(__dirname, "src/components")
}
}
});Tips & pitfalls
Tips:
- Keep baseUrl stable (e.g., src/).
- Mirror aliases in bundler/runtime.
- Avoid deep ../.. chains; prefer concise aliases.
Path alias check
Quick check: Which tsconfig options enable path aliases like @utils/*?
Recap
Recap: Configure baseUrl and paths for aliases, learn TS resolution order, and align bundler/runtime to avoid broken imports.
Frequently asked questions
Is the “Path mapping & module resolution” lesson free?
Yes — the full text of “Path mapping & module resolution” is free to read here on the web, and the TypeScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Path mapping & module resolution”?
Configure path aliases with baseUrl/paths, understand how TS resolves modules, and avoid common pitfalls. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start TypeScript Academy?
No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Path mapping & module resolution” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this TypeScript Academy lesson?
Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- ES Modules (named vs default), re-exports
- Ambient declarations (.d.ts) & third-party typings
- Path mapping & module resolution