How To Export A Type In Typescript

Knowing how to export a Type in Typescript will help you a lot when working on multiple files. So how to do it? Let’s go into detail now.

How to export a Type in TypeScript

Use import export method

Typescript provides a handy syntax for interacting between the files import-export. With the import/export method, we can import a function, value, type … from the export file. To use import/export syntax, I will need the export file to declare what type I want to export inside curly braces, and in the import file, I use that name inside curly braces to import.

Example:

type inforDetail = {
    name: string,
    age: number,
    address: string,
    theHeight: number,
    hobby: string[],
    talent: string[]
}

export {inforDetail}

import { inforDetail } from "./anotherFile";

const james: inforDetail = {
    name: 'James',
    age: 28,
    address: 'England',
    theHeight: 185,
    hobby: ['Art', 'Music', 'Movies', 'Games'],
    talent: ['Sing']
}

console.log(james)

Output:

{
  name: 'James',
  age: 28,
  address: 'England',
  theHeight: 185,
  hobby: [ 'Art', 'Music', 'Movies', 'Games' ],
  talent: [ 'Sing' ]
}

As you see here, I wrap inforDetail inside curly braces to export, and when I import, I will have to write that correct name within curly braces. If you want to import multiple files, you can separate all those types with a comma symbol.

Example:

type inforDetail = {
    name: string,
    age: number,
    address: string,
    theHeight: number,
    hobby: string[],
    talent: string[]
}
 
type animalDetail = {
    name: string,
    address: string
}

export {inforDetail, animalDetail}

import {inforDetail, animalDetail} from "./anotherFile";

const james: inforDetail = {
    name: 'James',
    age: 28,
    address: 'England',
    theHeight: 185,
    hobby: ['Art', 'Music', 'Movies', 'Games'],
    talent: ['Sing']
}

const animal: animalDetail = {
    name: 'African Buffalo',
    address: 'African'
}

console.log(animal)
console.log(james)
export {}

Output:

{ name: 'African Buffalo', address: 'African' }
{
  name: 'James',
  age: 28,
  address: 'England',
  theHeight: 185,
  hobby: [ 'Art', 'Music', 'Movies', 'Games' ],
  talent: [ 'Sing' ]
}

Use export default

With export default, you can rename the type to follow your purpose, and you don’t have to wrap it inside curly braces. But the side effect is you can only export one default type.

Example:

type inforDetail = {
    name: string,
    age: number,
    address: string,
    theHeight: number,
    hobby: string[],
    talent: string[]
}

export default inforDetail

import personInfor from "./anotherFile";

const james: personInfor = {
    name: 'James',
    age: 28,
    address: 'England',
    theHeight: 185,
    hobby: ['Art', 'Music', 'Movies', 'Games'],
    talent: ['Sing']
}

console.log(james)
export {}

Output:

{
  name: 'James',
  age: 28,
  address: 'England',
  theHeight: 185,
  hobby: [ 'Art', 'Music', 'Movies', 'Games' ],
  talent: [ 'Sing' ]
}

If you use multiple export default, you will get the error:

type inforDetail = {
    name: string,
    age: number,
    address: string,
    theHeight: number,
    hobby: string[],
    talent: string[]
}

type animalDetail = {
    name: string,
    address: string
}

export default inforDetail
export default animalDetail

The error:

A module cannot have multiple default exports.
  anotherFile.ts:15:18
15   export default inforDetail
                    ~~~~~~~~~~~
  anotherFile.ts:16:18
16   export default animalDetail
                    ~~~~~~~~~~~~
     Another export default is here.
Found 2 errors in the same file, starting at: anotherFile.ts:15

Summary

I showed and explained how to export a Type in Typescript in this article. You can use the import/export method or the export default method. I hope it is helpful to you. Thanks for reading!

Maybe you are interested:

• Return Multiple values from a Function in TypeScript
• Set the return type of a arrow function in TypeScript
• Access an Enum by Index in TypeScript

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm