How to import a Function from another file using TypeScript

Dividing the code into small reusable parts and storing them in separate files create the project’s corresponding modules and make your project easy to organize and understand. This tutorial will show you how to use the import/export statement to import a Function from another file using TypeScript. Check out the information below for detailed instructions.

Method to import a Function from another file using TypeScript

Suppose we have two files: ‘Home.ts’ and ‘App.ts’, located in the same folder in the project. To import a Function from ‘Home.ts’ into ‘App.ts’, you can follow the following steps:

1. In the ‘Home.ts file’, define a function, then export it using the export statement.
2. In the ‘App.ts’ file, use the import statement to import the exported function from ‘Home.ts’.
3. Use the function imported into ‘App.ts’ from ‘Home.ts’.

In TypeScript, there are two ways to export a module from a file: named export and default export. We also have two import types that correspond to these two export types.

In case you use a named export, here is an example of exporting a function from ‘Home.ts’:

// Use a named export
export function isEvenNumber(n: number) {
    if (n % 2 == 0) {
        return true;
    }
    return false;
}

Here is how we would import the ‘isEvenNumber’ function into ‘App.ts’:

// Use a named import
import { isEvenNumber } from "./Home";

console.log(isEvenNumber(10));
console.log(isEvenNumber(11));

Output:

true
false

When importing a function, we use curly braces to wrap around the function’s name. This is called a named import.

As you can see, the ‘isEvenNumber’ function now works in the ‘App.ts’ file, and the result is the same as we expected.

Alternatively, you can use a default export to export a function in the ‘Home.ts’ file.

// Use a default export
export default function isEvenNumber(n: number) {
    if (n % 2 == 0) {
        return true;
    }
    return false;
}

At this point, we import the ‘isEvenNumber’ function into ‘App.ts’ as follows:

// Use a default import
import isEvenNumber from "./Home";

console.log(isEvenNumber(10));
console.log(isEvenNumber(11));

Output:

true
false

When using a default export for an arrow function, you must declare the function before exporting it. To illustrate, take a look at this example:

// Arrow function
const isEvenNumber = (n: number) => {
    if (n % 2 == 0) {
        return true;
    }
    return false;
};

export default isEvenNumber;

One important note with all the approaches above is that you should pay attention to the file paths. If you declare the wrong path when importing, errors will likely occur.

Summary

In summary, we just showed you how to use the import/export statement to import a Function from another file using TypeScript. You can practice following the examples above and observe the results. Hopefully, the information we provided in this tutorial will be helpful to you.

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js