Path mapping

Learn module mapping with paths.

What is path mapping?

paths maps import specifiers to real file paths, so you can use short aliases instead of long relative paths. The baseUrl field sets the root for paths entries and is usually set to ..

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

Here @/utils resolves to src/utils.

Alias resolution

An alias contains a * wildcard; during resolution the left of the wildcard matches and the right is substituted. For example "@/*": ["src/*"] turns @/utils/helpers into src/utils/helpers.

const paths = { "@/*": ["src/*"] };
// "@/utils" → "src/utils"

If there are multiple targets, the first match is used.

Exercise Resolve the alias

Write a resolveAlias function taking specifier and paths. For each alias, strip the * and match the prefix; on match, replace the target's * with the remainder and return it. For paths = { "@/*": ["src/*"] }, print the result of resolveAlias("@/utils", paths).

Show example solution

function resolveAlias(specifier: string, paths: Record<string, string[]>): string {
  for (const [alias, targets] of Object.entries(paths)) {
    const prefix = alias.replace("*", "");
    if (specifier.startsWith(prefix)) {
      const rest = specifier.slice(prefix.length);
      return targets[0].replace("*", "") + rest;
    }
  }
  return specifier;
}

const paths = { "@/*": ["src/*"] };
console.log(resolveAlias("@/utils", paths));

Test yourself

Which field sets the root directory when using `paths`?
- baseUrl
- outDir
- baseDir
- rootDir
Show answer

baseUrl — baseUrl sets the root against which paths entries are resolved; rootDir is the input root, outDir is the output directory, and baseDir is not a valid option.

Define an alias

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

Show answer

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

Path mapping parts

paths

lists alias mappings
baseUrl

sets resolution root
*

wildcard
@/*

example alias pattern

Next lesson: Summary - tsconfig in depth

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies