How To Configure Path Aliases With TypeScript

Laying out the nuances of this helpful naming strategy

By Birgit Reitz-Hofmann

In this article, I’ll show how to configure path aliasing in a TypeScript project. The example project will be overly simplistic, but the configuration will work for real-world applications. TypeScript makes adding path aliases easy, but it does not come preconfigured. There are a few nuances to it, which is what I’ll be covering.

Getting Started

A path alias is a user-defined name that replaces a long relative path.

Non-aliased relative import
import { IUser } from "../../../../../../../@interfaces/user"
Aliased import
import { IUser } from "@interfaces"

As you can see from the example above, aliases have a big impact on the readability of your import statements.

Example Folder Structure

Below is the folder structure I will be using for the rest of the examples:

@interfaces/
  user.d.ts
e2e/
src/
  utils/
    common/
      common.ts
    user/
      user.ts
  server.ts
index.ts

Without aliasing

Let’s take a look at two of my files before I implement path aliasing.

src/server.ts

src/utils/user/user.ts

src/server.ts and src/utils/user/user.ts import the IUser type. The relative import of the IUser type inside src/utils/user/user.ts is already looking long. As my application grows, so will the length of my relative imports.

Types Path Aliasing