How to Export Statement in TypeScript

1. Use the export Statement in TypeScript
2. Types of Export in TypeScript
3. Export Everything in TypeScript

The export keyword in TypeScript is used for exporting variables, constants, classes, functions, and interfaces or type aliases across different files. It becomes very useful for efficient file management across large projects in TypeScript.

This article will demonstrate using the export statement in TypeScript.

Use the export Statement in TypeScript

The syntax for export statements starts with the export keyword followed by the element to be exported, which can be imported into another file using the import keyword.

File1.ts:

export SomeFunction() {
    // body of the function
}

File2.ts:

import { SomeFunction } from "./File1";

SomeFunction();

The above shows the syntax and a basic example of how the export keyword can be used in TypeScript to import and export a module.

Types of Export in TypeScript

TypeScript has different export statements, one being the named export and the other the default export. The default export is limited to one default export per file, while there can be multiple named exports or normal export statements.

File1.ts:

const AddTwoNumbers = (a : number, b : number) : number  => {
    return a + b;
}

export default AddTwoNumbers;

File2.ts:

import AddTwoNumbers from "./File1"
const result = AddTwoNumbers(4,5);

Thus in the above example, two numbers are added after using the default export function defined in File1.ts. Now the function can be used even with a different name.

For example:

File2.ts:

import AddNumbers from "./File1"
const result = AddNumbers(4,5);

Thus any name can be used in the default export condition. However, default exports are limited to only one per file.

We must use the non-default or the named export to export more elements. The modules exported are imported with the same name.

File1.ts:

const AddNumbers = (a : number, b : number) : number => {
    return a + b;
}

const SubtractTwoNumbers = (a : number, b : number) : number => {
    return a - b;
}

export { AddNumbers, SubtractTwoNumbers };

File2.ts:

import { AddNumbers, SubtractTwoNumbers } from "./File1"
const resultAdd = AddNumbers(4,5);
const resultSub = SubtractTwoNumbers(4,5);

The above shows the example of named exports and imports in the respective files. They have to be enclosed within curly brackets, and unlike default export, there can be any number of named exports.

Another way of using default exports in TypeScript is using the export = syntax.

File1.ts:

class LengthValidator {
    check(s : string) {
        return s.length > 0;
    }
}

export = LengthValidator;

File2.ts:

import lengthChecker = require("./File1");
let validator = lengthChecker();
var testString : string = "test"
if ( validator.check(testString)) {
    console.log("Okay");
} else {
    console.log("Not working");
}

Export Everything in TypeScript

Sometimes it becomes important to export all the elements defined in a certain file. It can be done via the export and the * operator.

File1.ts:

export const AddNumbers = (a : number, b : number) : number => {
    return a + b;
}

export const SubtractTwoNumbers = (a : number, b : number) : number => {
    return a - b;
}
export * as utils from "./File1"

File2.ts:

import {utils} from "./File1"
const resultAdd = utils.AddNumbers(4,5);
const resultSub = utils.SubtractTwoNumbers(4,5);

Thus everything in File1.ts is exported as utils and can be imported into a different file, and the functions can be referenced as shown in the example above.