Import a Type from Another file using TypeScript

Import a Type from Another file using TypeScript #

To import a type from another file in TypeScript:

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

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

Copied!
// 👇️ named export
export type Employee = {
  id: number;
  name: string;
  salary: number;
};

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

Copied!
// 👇️ named import
import { Employee } from './another-file';

const emp: Employee = {
  id: 1,
  name: 'James',
  salary: 100,
};

console.log(emp);

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

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

You might also see examples that explicitly use the type keyword when importing.

Copied!
// 👇️ explicitly importing type
import type { Employee } from './another-file';

const emp: Employee = {
  id: 1,
  name: 'James',
  salary: 100,
};

console.log(emp);

You can only use the import type syntax when importing types and interfaces.

The examples above use 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.

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

Here are the contents of another-file.ts.

Copied!
type Employee = {
  id: number;
  name: string;
  salary: number;
};

// 👇️ default export
export default Employee;

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

Copied!
// 👇️ default import
import Employee from './another-file';

const emp: Employee = {
  id: 1,
  name: 'James',
  salary: 100,
};

console.log(emp);

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

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

Copied!
// 👇️ default import
import Foo from './another-file';

const emp: Foo = {
  id: 1,
  name: 'James',
  salary: 100,
};

console.log(emp);

This works, but is confusing and should be avoided.

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

Copied!
type Employee = {
  id: number;
  name: string;
  salary: number;
};

// 👇️ default export
export default Employee;

// 👇️ named export
export type Person = {
  name: string;
};

And here is how you would import the two types.

Copied!
// 👇️ default and named imports
import Employee, { Person } from './another-file';

const emp: Employee = {
  id: 1,
  name: 'James',
  salary: 100,
};

console.log(emp);

const person: Person = {
  name: 'Carl',
};
console.log(person);

We used a default import to import the Employee type and a named import to import the Person type.

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