How to set an absolute path in TypeScript

Absolute file paths can help organize the imports in your TypeScript projects by improving the way import locations are fetched by the compiler.

When a project grows bigger, your library of modules grows. The modules in your project might be referencing each other via imports.

This can become quite complex to manage when you have to import modules from their relative path in which the code is executed.

You’ll get situations like the example below in which your try to use the previous directory command “../” to find the right folder in your project from where you want to make use of the import.

import { VpcStack } from '../../../src/lib/skeleton/index';

This can be improved by using an absolute path in your TypeScript project, like so:

import { VpcStack } from '@/lib/skeleton/index';

In order to get this result, you need to update the tsconfig.json in your TypeScript project and configure the baseUrl to the location where your store your modules e.g. “./src“.

Then you need to configure the paths property and re-map imports to “@” to improve the readability of your code so other users can see it’s an alias instead of a relative file path.

What is an absolute path in TypeScript?

An absolute path in TypeScript is the full path starting from the root of the operating file system up until the working directory.

So let’s say you run your TypeScript app in /Users/dannysteenman/home/projects/example-project/src/lib/main.ts. This is the entry point where you run the top-level code of your TypeScript application.

Then this is the absolute path of your working directory /Users/dannysteenman/home/projects/example-project/src/lib/.

How to configure TypeScript to use absolute paths

If you want to make use of absolute file paths in your TypeScript app then you need to update the tsconfig.json file which you can find at the root of your TypeScript project. This file contains the compiler options required to compile and run the project.

You need to add the following properties: baseUrl and paths.

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

By setting the baseUrl property, it allows you to set a base directory in your project so you can resolve non-absolute paths. In this case, my modules are stored in the “src” directory of the project.

Configuring the paths property allows you to re-map imports to lookup locations relative to the baseUrl.

Adding a symbol like “@” makes the code more readable for other users so they know this path is an alias to the baseUrl and not a relative path.

Once you’ve updated the tsconfig.json with the new properties. You can import modules from this:

import { VpcStack } from '../../../src/lib/skeleton/index';

to a more human-readable way like:

import { VpcStack } from '@/lib/skeleton/index';

Conclusion

As you can see configuring TypeScript with a baseUrl and paths in the tsconfig.json of your TypeScript compiler options can simplify the way you import modules without using relative paths.

Now that you avoid the use of relative import paths, the readability of your code will improve and it becomes easier to manage growing libraries of complex modules that contain interdependencies.

If you’d like to know how to configure absolute paths in JavaScript you can follow this article that I wrote.