Borislav Hadzhiev
Fri Mar 04 2022·3 min read
Photo by Nirzar Pangarkar
To import a type from another file in TypeScript:
A
, e.g. export type Employee = {}
.B
as import { Employee } from './another-file';
.B
.Here is an example of exporting a type from a file called another-file.ts
.
// 👇️ 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
.
// 👇️ 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.
// 👇️ 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.
import type
syntax is mostly used to get around some circular import errors caused by importing types between the same files.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
.
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.
// 👇️ 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
.
// 👇️ 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.
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.
// 👇️ 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.