TypeScript Path Aliases: Clean Imports at Scale

Sun, 22 Dec 2024 00:00:00 +0900

TypeScript path aliases eliminate the pain of deep relative imports like ../../../utils/helpers, replacing them with clean, intention-revealing paths such as @utils/helpers. This article covers configuration, bundler integration, testing, and migration strategies.

Configuring baseUrl and paths

The foundation of path aliases is the paths mapping in tsconfig.json, combined with baseUrl:

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

baseUrl sets the base directory for resolving non-relative module names. paths maps alias prefixes to file system locations relative to baseUrl. The wildcard * matches any path segment after the prefix.

Project-Config on Commentary of Takao

TypeScript Path Aliases: Clean Imports at Scale

Configuring baseUrl and paths