How to export a Function in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 10, 2022

banner

Photo from Unsplash

Export a Function in TypeScript #

Use named exports to export a function in TypeScript, e.g. export function sum() {}. The exported function can be imported by using a named import as import {sum} from './another-file'. You can use as many named exports as necessary in a single file.

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

another-file.ts
// 👇️ named export export function sum(a: number, b: number) { return a + b; } // 👇️ if using arrow function // export const sum = (a: number, b: number) => { // return a + b; // };

Note that using export on the same line as the function's definition is the same as exporting the function as an object after it has been declared.

another-file.ts
function sum(a: number, b: number) { return a + b; } // 👇️ named export export { sum };

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

index.ts
// 👇️ named import import { sum } from './another-file'; console.log(sum(13, 27)); // 👉️ 40

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

We wrapped the name of the function 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 a function 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.

If you try to use multiple default exports in a single file, you would get an error.

another-file.ts
export default function sum(a: number, b: number) { return a + b; } const example = 'hello world'; // ⛔️ Error: A module cannot have multiple default exports.ts(2528) export default example;

IMPORTANT: If you are exporting 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 uses both - default and named exports.

another-file.ts
const sum = (a: number, b: number) => { return a + b; }; // 👇️ default export export default sum; // 👇️ named export export const example = 'hello world';

And here is how you would import the two exports.

index.ts
// 👇️ default and named import import sum, { example } from './another-file'; console.log(sum(13, 27)); // 👉️ 40 console.log(example); // 👉️ "hello world"

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

We used a default import to import the sum function and a named import to import the example variable.

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

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.

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.