Tag: index

What is the use of index.ts file (barrel file or barrel export) ?

An index.ts file in a folder is used to re-export modules from that folder.
When you import from the folder, you automatically get what is exported from index.ts.

Benefits and Uses:

1. Simplifies Imports

Without barrel :

import GameCard from '../Components/GameCard/GameCard';

With barrel:

import GameCard from '../Components/GameCard';

This makes your imports shorter and cleaner.

2. Centralizes Exports

You can export multiple components, functions, or types from one place.

Example:

export { default as GameCard } from './GameCard';
export { helperFunction } from './helpers';

Now you can import both from the folder directly.

3. Easier Refactoring

If you rename or move files, you only need to update the index.ts file, not every import in your project.

4. Improves Code Organization

  • Encourages grouping related files and exports together.
  • Makes it easier for new developers to see what a folder provides.

What do we call this process?

  • Barrel export
  • Barrel file
  • Sometimes just called an index file pattern

Summary

Using an index.ts as a barrel file:

  • Makes imports cleaner and easier to manage.
  • Centralizes exports for better organization.
  • Is a common best practice in TypeScript and JavaScript projects.

💡 Found this helpful? Subscribe for simple React and TypeScript guides with real-world examples. Happy Coding!