CODEWITHSUNDEEP
reactjstypescript
Víctor Navarro
Víctor Navarro

Reputation: 912

Typescript folders base absolute imports

At my company we like to organize our React code like this:

components/
    button.tsx
    slider.tsx
    index.ts
helpers/
    math.ts
    auth.ts
    index.ts
constants/
    config.ts
    api.ts
    index.ts

Where each index.ts exports all its adjacent files. Then everything is imported from the folders like this:

// I am button.tsx
import { login, sum } from '../helpers';
import { API_KEY } from '../constants';
import { Slider } from './slider';

I will want to instead look like this:

import { login, sum } from 'helpers';
import { API_KEY } from 'constants';
import { Slider } from 'components';

I messed around with absolute import settings in tsconfig.json but I didn't make it work.

Is this even possible? Thanks!

Upvotes: 0

Views: 520

Answers (1)

mortezashojaei
mortezashojaei

Reputation: 452

you need add bellow lines in your tsonfig.json file (in your project root):

  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]

Upvotes: 1

Related Questions