Re-export values from another file in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 6, 2022

banner

Photo from Unsplash

Re-export values from another file in TypeScript #

To re-export values from another file in TypeScript, make sure to export the name exports as export {myFunction, myConstant} from './another-file and the default export as export {default} from './another-file'. The values can be imported from the file that re-exported them.

Here is an example of a file that has 2 named exports and a default export.

another-file.ts
// 👇️ named export export function getEmployee() { return { id: 1, salary: 100 }; } // 👇️ named export export const greeting = 'hello world'; // 👇️ default export export default function sum(a: number, b: number) { return a + b; }

Here is how you would re-export the exported members of another-file.ts from a file called index.ts.

index.ts
export { getEmployee, greeting, default } from './another-file';

The example above directly re-exports the 2 named exports and the default export.

This means that you can't use getEmployee, greeting and the default export in the index.ts file, because we haven't imported them, we directly re-exported them.

If you have to use the values in the file, you would also have to import them.

index.ts
// 👇️ import (only if you need to use them in index.ts) import sum, { getEmployee, greeting } from './another-file'; // 👇️ re-export export { getEmployee, greeting, default } from './another-file'; console.log(sum(10, 15)); console.log(getEmployee()); console.log(greeting);

The syntax for re-exporting members of another module is:

index.ts
// 👇️ re-export NAMED exports export { getEmployee, greeting } from './another-file'; // 👇️ re-export DEFAULT export export { default } from './another-file';

The two lines from the example above can be combined into a single line if you're re-exporting members of the same file.

If you are re-exporting members from multiple files, you would have to use a line of code for each file.
index.ts
// 👇️ re-export NAMED exports export { getEmployee, greeting } from './first-file'; // 👇️ re-export default export export { default } from './second-file';

You could then import the re-exported members from the same module.

third-file.ts
import sum, { getEmployee, greeting } from './index'; console.log(sum(100, 50)); console.log(getEmployee()); console.log(greeting);
This is the main advantage of re-exporting values - you can re-export the members of multiple files from a single module, which would simplify your imports.

The pattern you often see is - re-export members of different files from a file called index.ts. The name index.ts is important, because you don't have to explicitly specify the name index when importing.

For example, assuming that third-file.ts and index.ts are located in the same directory, I could import from index.ts like so:

index.ts
import sum, { getEmployee, greeting } from './'; // 👈️ implicit console.log(sum(100, 50)); console.log(getEmployee()); console.log(greeting);

This is useful when you group your code in directories with descriptive names, because you would be importing from ./utils, rather than ./utils/index or ./utils/nested1, ./utils/nested2, etc.

Many of the files you use might make use of multiple utility functions that have been extracted into separated files, and you might not want to have 5 lines of imports just for utility functions or constants - this is when re-exporting from an index.ts file comes in.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.