How to export multiple Interfaces in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 6, 2022

banner

Photo from Unsplash

Export multiple Interfaces in TypeScript #

Use named exports to export multiple interfaces in TypeScript, e.g. export interface A {} and export interface B {}. The exported interfaces can be imported by using a named import as import {A, B} from './another-file'. You can have as many named exports as necessary in a single file.

Here is an example of exporting multiple interfaces from a file called another-file.ts.

another-file.ts
// 👇️ named export export interface Employee { id: number; salary: number; } // 👇️ named export export interface Person { name: string; }

Note that using export on the same line as the interface's definition is the same as exporting the interfaces as an object after they have been declared.

another-file.ts
interface Employee { id: number; salary: number; } interface Person { name: string; } // 👇️ named exports export { Employee, Person };

Here is how we would import the interfaces in a file called index.ts.

index.ts
// 👇️ named imports import { Employee, Person } from './another-file'; const employee: Employee = { id: 1, salary: 100, }; const person: Person = { name: 'James', };

Make sure to correct the path that points to the another-file module if you have to. The example above assumes that another-file.ts and index.ts are located in the same directory.

For example, if you were importing from one directory up, you would do import {Employee, Person} from '../another-file'.

We wrapped the names of the interfaces in curly braces when importing them - this is called a named import.

TypeScript uses the concept of modules, in the same way that JavaScript does.

In order to be able to import an interface from a different file, it has to be exported using a named or default export.

The example above uses named exports and named imports.

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

If you try to use multiple default exports (for functions, classes, variables) in a single file, you would get an error.

However, if you use multiple default exports to export interfaces from the same file, the interfaces would get merged.

another-file.ts
// 👇️ default export export default interface Employee { id: number; salary: number; } // 👇️ default export export default interface Person { name: string; }

And here is how you would import the merged interface.

index.ts
// 👇️ default import import Employee from './another-file'; const employee: Employee = { id: 1, name: 'Tom', salary: 100, };

Notice that the Employee interface now has the properties of both Employee and Person.

You should avoid using this pattern as it is confusing.

In my experience, most real world codebases exclusively use named exports and imports, because they make it easier to leverage your IDE for autocompletion and auto-imports.

You also don't have to think about which members are exported with a default or named export.

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.