Modules in TypeScript - Modules in depth in TypeScript

• Modules in TypeScript
• Exporting and Importing Modules
  • Module Exporting
  • Importing Module
• Default Exports
  • Import default exported module
• Namespace Imports
  • Importing namespaced module import
• Conclusion

In TypeScript, modules are used to organize code into reusable and maintainable units. Modules can be used to create libraries, frameworks, and applications that are composed of multiple files.

Note: Module is almost similar as JavaScript, just added some types for TypeScript.

In this article, we will discuss modules in TypeScript, including what is module, exporting and importing modules, default exports, and namespace imports. We will provide examples to help you better understand how modules work in TypeScript.

¶Modules in TypeScript

A module is a collection of code that can be reused across multiple files or projects. In TypeScript, a module can be a TypeScript file, or a collection of TypeScript files that are compiled into a single module.

Modules can contain variables, functions, classes, and other TypeScript constructs. Modules can also be exported and imported, which allows them to be used across multiple files.

¶Exporting and Importing Modules

¶Module Exporting

To export a module in TypeScript, you can use the export keyword before a variable, function, or class declaration.
For example, consider the following module called math.ts:

export function add(a: number, b: number): number {
  return a + b;
}

In this example, we export a function called add that takes two parameters of type number and returns their sum.

¶Importing Module

The above module can be imported in another TypeScript file using the import keyword, like this:

import { add } from "./math";

let result = add(2, 3);
console.log(result); // Output: 5

In this example, we import the add function from the math module using a named import. We then use the add function to add two numbers and log the result to the console.

This is how, we can use same code in separate files by just import that named module. When typescript compiles, this module converted to JavaScript compatible code.

¶Default Exports

In addition to named exports, TypeScript also supports default exports. A default export is a single export that is the default export for a module.

To export a default export, you can use the export default syntax. For example, consider the following module called person.ts:

export default class Person {
  constructor(public name: string, public age: number) {}
}

In this example, we export a Person class as the default export of the module. This class has two properties, name and age, which are set in the constructor.

¶Import default exported module

This module can be imported in another TypeScript file using the import keyword, like this:

import Person from "./person";

let john = new Person("John Doe", 30);
console.log(john.name, john.age); // Output: John Doe 30

In this example, we import the Person class as the default export of the person module. We then create a new Person object and log its name and age properties to the console.

¶Namespace Imports

Namespace imports are another way to import modules in TypeScript. A namespace import is an import that contains all the exported members of a module as properties of an object.

To use a namespace import, you can use the import * as syntax. For example, consider the following module called math.ts:

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

In this example, we export two functions, add and subtract, from the math module.

¶Importing namespaced module import

This module can be imported using a namespace import, like this:

import * as math from "./math";

let result1 = math.add(2, 3);
let result2 = math.subtract(5, 2);

console.log(result1, result2); // Output

In this example, we import the math module using a namespace import. We then use the math object to call the add and subtract functions and log their results to the console.

¶Conclusion

In conclusion, modules are an essential part of any TypeScript project. They allow you to organize your code into reusable and maintainable units, making it easier to develop and maintain your codebase.

In this article, we discussed the basics of modules in TypeScript, including exporting and importing modules, default exports, and namespace imports. We provided examples to help you better understand how modules work in TypeScript.

By using modules in your TypeScript projects, you can create code that is more organized, reusable, and maintainable. With a solid understanding of modules, you can take your TypeScript development to the next level.