TIL Absolute Imports with Typescript

2023 Update

Use this instead

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

Then you can import like this:

import { timeSince } from '~/utils/dates'

If you hate seeing this:

// SomeContainer.tsx
import {MyComponent} from '../../components/MyComponent.tsx'

and would prefer to see this instead:

// SomeContainer.tsx
import {MyComponent} from 'components/MyComponent.tsx'

Heres the snippet you need:

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
  }
}

BONUS: Wanna import from just components/? §

e.g.

// SomeContainer.tsx
import {MyComponent} from 'components'

Just add an index.ts inside the components folder (and any other folder you store types of components in)

// components/index.ts
// if using export default
export {default as MyComponent} from './Mycomponent'
// If using named exports
export * from './Mycomponent'

Much cleaner, ain’t it?