Exporting and Importing Modules in TypeScript

TypeScript is a superset of JavaScript that adds static typing to the language. With TypeScript, you can write robust and scalable code, and one of its many features is the ability to work with modules. Modules allow you to split your code into separate files, making it easier to organize and reuse.

In this article, we will explore how to export and import modules in TypeScript, and how they can improve code maintainability and reusability.

Exporting Modules

In TypeScript, you can export functions, classes, variables, and interfaces from a module. To export a module, you need to use the export keyword followed by the element you want to export. Let's take a look at an example:

// mathUtils.ts
export function addNumbers(a: number, b: number): number {
  return a + b;
}

export const PI = 3.14;

export class Calculator {
  multiply(a: number, b: number): number {
    return a * b;
  }
}

export interface Shape {
  area(): number;
}

In this example, we have exported a function addNumbers, a constant PI, a class Calculator, and an interface Shape. Now, we can use these exported elements in other files by importing them.

Importing Modules

To import a module in TypeScript, you can use the import keyword followed by the name of the exported element. You can import multiple elements using destructuring or import everything using the * wildcard. Here's an example:

// app.ts
import { addNumbers, PI } from './mathUtils';

console.log(addNumbers(5, 3)); // Output: 8
console.log(PI); // Output: 3.14

In this example, we are importing the addNumbers function and the PI constant from the mathUtils module. We can then use these imported elements in our application. It's worth noting that you need to provide the path to the module file when importing.

If you want to import all the exported elements from a module, you can use the * wildcard. For example:

// app.ts
import * as math from './mathUtils';

console.log(math.addNumbers(5, 3)); // Output: 8
console.log(math.PI); // Output: 3.14

In this case, we are importing all the exported elements from the mathUtils module and accessing them through the math namespace.

Default Export

Besides named exports, TypeScript also supports default exports. A default export allows you to export a single element from a module as the default export. You can have only one default export per module. Let's see an example:

// calculator.ts
export default class Calculator {
  multiply(a: number, b: number): number {
    return a * b;
  }
}

In this example, we have a default export for the Calculator class. When importing a default export, you can choose any name for the imported element:

// app.ts
import Calc from './calculator';

const calculator = new Calc();
console.log(calculator.multiply(5, 3)); // Output: 15

Here, we are importing the default export from the calculator module and assigning it to the Calc variable.

Conclusion

Exporting and importing modules in TypeScript allows you to create reusable and organized code. You can export functions, classes, variables, and interfaces, and import them in other files. It improves code maintainability by splitting it into smaller, logical units. Take advantage of TypeScript modules to make your code more scalable and maintainable. Happy coding!