How to simplify and organize imports in Typescript

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

Comments

[Sara Lissette Luis Ibáñez]

If you create a index.ts file with:
export * from './beers.service';
export * from './whiski.service';
export * from './wine.service';

After, you can import all services as:
import { BeersService, WhiskyService, WineService } from './services';

You don't need to add index

[Dany Paredes]

Thanks! I update the post adding your buckets.

[Artem]

It could break project compilation in some cases.

[Phạm Thành Trung]

Can bundler still do tree-shaking with import like this?

[Lars Gyrup Brink Nielsen]

Yes, that's how library entry points are structured.