TIL: Typescript Path Aliases →

I was investigating an auth library today when I stumbled upon this syntax:

import { auth } from "@/lib/auth";

Which confused me, because I couldn't tell if it was a project path or a node module. Turns out this is a feature of TypeScript, which you can set up in your tsconfig.json like so:

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

This solution can help with cleaning up really long relative paths like I frequenctly see in Angular or React projects. It should also help when moving files around, that would otherwise break the relative imports.

// this:
import { SharedWidget } from '../../../../shared/widget';
// can become this:
import { SharedWidget } from '@/shared/widget';