Borislav Hadzhiev
Sun Mar 06 2022·3 min read
Photo by Taylor Leopold
Use named exports to export multiple types in TypeScript, e.g.
export type A {}
and export type B {}
. The exported types 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 types from a file called
another-file.ts
.
// 👇️ named export export type Employee = { id: number; salary: number; }; // 👇️ named export export type Person = { name: string; };
Note that using export
on the same line as the type's definition is the same
as exporting the types as an object after they have been declared.
type Employee = { id: number; salary: number; }; type Person = { name: string; }; // 👇️ named exports export { Employee, Person };
Here is how we would import the
types
in a file called index.ts
.
// 👇️ named imports import { Employee, Person } from './another-file'; const employee: Employee = { id: 1, salary: 500, }; const person: Person = { name: 'Jim', };
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'
.
TypeScript uses the concept of modules, in the same way that JavaScript does.
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 in a single file, you would get an error.
type Employee = { id: number; salary: number; }; type Person = { name: string; }; // ⛔️ Error: A module cannot // have multiple default exports.ts(2528) export default Employee; export default Person;
IMPORTANT: If you are exporting a a type, or a variable (or an arrow function) as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.
Having said that, you can use 1
default export and as many named exports as
you need in a single file.
Let's look at an example that exports multiple types and uses both - default and named exports.
type Employee = { id: number; salary: number; }; // 👇️ named export export type Person = { name: string; }; // 👇️ default export export default Employee;
And here is how you would import the two types.
import Employee, { Person } from './another-file'; const employee: Employee = { id: 1, salary: 500, }; const person: Person = { name: 'Jim', };
Notice that we didn't wrap the default import in curly braces.
We used a default import to import the Employee
type and a named import to
import the Person
type.
You can only have a single default export per file, but you can have as many named exports as necessary.
You also don't have to think about which members are exported with a default or named export.