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/?


// 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?

EMAIL: ved.acnaz@mas
PHONE: 3566 664 848 1+
Made with by Sam Zanca