Import an Enum from Another file using TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 3, 2022

banner

Photo from Unsplash

Import an Enum from Another file using TypeScript #

To import an enum from another file in TypeScript:

  1. Export the enum from file A, e.g. export enum EmailStatus {}.
  2. Import the enum in file B as import { EmailStatus } from './another-file'.
  3. Use the enum in file B.

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

another-file.ts
// 👇️ named export export enum EmailStatus { Read = 'READ', Unread = 'UNREAD', Draft = 'DRAFT', }

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

index.ts
// 👇️ named import import { EmailStatus } from './another-file'; const draft = EmailStatus.Draft; console.log(draft); // 👉️ "DRAFT"

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 another-file.ts was located one directory up, you'd have to import as import {EmailStatus} from '../another-file'.

We wrapped the name of the enum in curly braces when importing it - 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 enum from a different file, it has to be exported using a named or default export.

The example above uses a named export and a named import.

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.

Let's look at an example of how we would import an enum that was exported using a default export.

Here are the contents of another-file.ts.

another-file.ts
enum EmailStatus { Read = 'READ', Unread = 'UNREAD', Draft = 'DRAFT', } // 👇️ default export export default EmailStatus;

And here is how we would import the enum using a default import.

index.ts
// 👇️ default import import EmailStatus from './another-file'; const draft = EmailStatus.Draft; console.log(draft); // 👉️ "DRAFT"

Notice that we didn't wrap the import in curly braces.

We could have also used a different name when importing the enum, e.g. Foo.

index.ts
// 👇️ default import import Foo from './another-file'; const draft = Foo.Draft; console.log(draft); // 👉️ "DRAFT"

This works, but is confusing and should be avoided.

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.

You can also mix and match. Here is an example of a file that uses both a default and a named export.

another-file.ts
enum EmailStatus { Read = 'READ', Unread = 'UNREAD', Draft = 'DRAFT', } // 👇️ default export export default EmailStatus; // 👇️ named export export enum Sizes { Small = 'S', Medium = 'M', Large = 'L', }

And here is how you would import the two enums.

index.ts
import EmailStatus, { Sizes } from './another-file'; const draft = EmailStatus.Draft; console.log(draft); // 👉️ "DRAFT" const medium = Sizes.Medium; console.log(medium); // 👉️ "M"

We used a default import to import the EmailStatus enum and a named import to import the Sizes enum.

Note that you can only have a single default export per file, but you can have as many named exports as necessary.

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.