Import a Function from Another file using TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 3, 2022

banner

Photo from Unsplash

Import a Function from Another file using TypeScript #

To import a function from another file in TypeScript:

  1. Export the function from file A, e.g. export function sum() {}.
  2. Import the function in file B as import { sum } from './another-file'.
  3. Use the imported function in file B.

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; } // (arrow function) // export const sum = (a: number, b: number) => { // return a + b; // };

The syntax is the same when using arrow functions, all you have to do is use the export keyword.

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

index.ts
// 👇️ named import import { sum } from './another-file'; console.log(sum(50, 10)); // 👉️ 60

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 {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.

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

Here are the contents of another-file.ts.

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

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

index.ts
// 👇️ default import import sum from './another-file'; console.log(sum(50, 10)); // 👉️ 60

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

We could have also used a different name when importing the function, e.g. foo.

index.ts
import foo from './another-file'; console.log(foo(50, 10)); // 👉️ 60

This works, but is confusing and should be avoided.

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.

index.ts
const multiply = (a: number, b: number) => { return a * b; }; export default multiply;
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.

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

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

And here is how you would import the two functions.

index.ts
// 👇️ default and named imports import sum, { multiply } from './another-file'; console.log(sum(50, 10)); // 👉️ 60 console.log(multiply(50, 10)); // 👉️ 500

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

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

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.