How to simplify and organize imports in Typescript

How to simplify and organize imports in Typescript

Play this article

Table of contents

No heading

No headings in the article.

Sometimes we have a long list of imports, with files that come from the same place, it makes our code noisy and a bit longer, something like:

import { BeersService } from './services/beers.service';
import { WhiskyService } from './services/whiski.service';
import { WineService } from './services/wine.service';

We can simplify it by exposing all files, from a single file, to point to all of them.

Create drinks.ts into the service directory and export all services.

export * from './beers.service';
export * from './whiski.service';
export * from './wine.service';

Now we can update our files, to the new path.

import { BeersService, WhiskyService, WineService } from './services/drinks';

Thanks @lissetteibnz , If rename the filename from drinks.ts to index.ts, Javascript understand the file index like the entrypoint for the directory, so it works only using the directory name.

import { BeersService, WhiskyService, WineService } from './services';

The code looks clean and easy to ready because all of them comes from the same place.

Photo by Marcin Jozwiak on Unsplash