Introduction to modules in typescript

Modules in typescript:

In typescript, modules are used to organize the code with their own scope. By default, everything we declare like variables, functions, classes etc. are declared in global scope. With modules we can declare them in local scope.

It is pretty easy. You need to use two keywords: export and import. export is to export something from a module and import is to import something to a module. Also, we can say that a file with import or export is a module.

Example of module:

We can export a variable, function, class, type alias or interface from a module. That declaration can be imported in a separate module.

Create one file utils.ts with the below code:

export const hello = 'Hello World !!';

We are exporting one string.

Create another file index.ts in the same folder:

import { hello } from "./utils";

console.log(hello);

Now, if you run it, it will print Hello World.

Multiple exports:

We can export multiple fields from a module. Let’s change the utils.ts file as below:

const hello = 'Hello World !!';

const findEven = (value: number) => value%2 == 0;

export {findEven, hello};

and index.ts file:

import { findEven, hello } from "./utils";

console.log(hello);
console.log(findEven(20));

It will work similarly and print the below output:

Hello World !!
true

Renaming the exports:

exported items in a module can be renamed to something else. For example, let’s change the function and variable name in the above example.

const hello = 'Hello World !!';

const findEven = (value: number) => value%2 == 0;

export {findEven as findEvenUtil, hello as defaultMessage};

Now, in the index.js file, we can import them as:

import { findEvenUtil, defaultMessage } from "./utils";

console.log(defaultMessage);
console.log(findEvenUtil(20));

Renaming the imports:

We can also rename the imported items in a module. For the below utils.ts file:

const hello = 'Hello World !!';

const findEven = (value: number) => value % 2 == 0;

export { findEven, hello };

We are exporting without changing the names. So, in the index.ts file, I can import it as like below:

import { findEven as findEvenUtil, hello as defaultMessage } from "./utils";

console.log(defaultMessage);
console.log(findEvenUtil(20));

Notice that we are also renaming it while importing.

Import all:

We can import all from a file. In that way, we don’t have to write import statement for each import.

Below code imports all from a different file:

import * as Utils from "./utils";

console.log(Utils.hello);
console.log(Utils.findEven(20));

utils.ts file is:

const hello = 'Hello World !!';

const findEven = (value: number) => value % 2 == 0;

export { findEven, hello };

Default export:

Each module can have one default export. Keyword default is used for a default export. Only one default export we can have. The import for default export is different.

For example, let’s consider the below util.ts file:

const findEven = (value: number) => value % 2 == 0;

export default findEven;

and we can import it as

import findEven from './modules/util.ts

CodeVsColor