Consolidate Your TypeScript Imports With index.ts Files
A brief guide to this helpful feature
--
I wanted to share a helpful technique I use in TypeScript projects to consolidate imports and make my code base much easier to read. It involves re-exporting modules in directories with index.ts files. Exporting through an index.ts file allows other modules to import everything from on directly in a single import statement.
To start, let’s take a simple example app.
message.ts and user.ts both have exported functions used in the server.ts file.
user.ts
message.ts
server.ts
Inside server.ts, I need to have two import lines to get both functions. To simplify the imports, add an index.ts file to the components folder and re-export the contents of the files contained within it.
index.ts
When importing modules, TypeScript initially looks for an index.ts file. If one cannot be found, it will look for a file with the name specified ie. message or user.
With an index.ts file in place, the imports in the server.ts file can be consolidated into one import line.
Even a simplified example shows the improvement in readability between the two versions.
Application Growth
Another benefit of this technique is it handles new exports automatically. Let’s say I add another function to my user.ts file.
With the new function in place, I don’t have to make any changes to my index.ts file. Everything in users.ts is already being exported. Now, I just need to specify the import in my server.ts file.
Declaration files
If you have a folder containing files, you can utilize the same design pattern, with one alteration. Instead of an index.ts file, use an index.d.ts file.
It’s possible to use index.ts for your declaration files, but they will be included when you convert your project to JavaScript. Ideally, you keep out files with no purpose.
Drawbacks
Speaking from experience, this is a painful design pattern to implement after a codebase has been in existence for some time. If you can, I would adopt this technique at the start of a project.
Also, this technique will increase the number of files you have in your project. In my experience, the benefits of simplified import paths outweigh the costs of extra files.
Wrapping Up
Using index.ts files to consolidate imports is a great way to promote readability in your codebase. It’s a vital tool in every medium to large codebase I’ve worked on in the past few years.
