How to export an Interface in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 10, 2022

banner

Photo from Unsplash

Export an Interface in TypeScript #

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

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

another-file.ts
// 👇️ named export export interface Person { name: string; country: string; }

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

another-file.ts
interface Person { name: string; country: string; } // 👇️ named export export { Person };

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

index.ts
import { Person } from './another-file'; const person: Person = { name: 'James Doe', country: 'Germany', };

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 {Person} from '../another-file'.

We wrapped the name of the interface 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: 'James Doe', salary: 1447, };

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.