How to setup Absolute Imports in a Typescript project

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?