How to import a module in Typescript ?

Last Updated : 19 Oct, 2021

Before starting with importing modules, first of all, we need to know the basics of modules in TypeScript.

We know that JavaScript has come with the concept of modules from the ES6 version in 2015 and by 2020 had broad support in most web browsers and JavaScript runtimes. TypeScript also shares the same concept of a module. Any file which contains a top-level import or export is considered a module.

The module is designed to arrange a code written in TypeScript and used as a local scope. Modules are basically scripts written in separate files. Import allows you to reference their source location in an existing file. Now we will understand different ways to import external models, and know how to use that module in the desired location.

Approach: Before importing any module we need to export it from another file. We can create a module by using the export keyword and can use it in other modules by using the import keyword. We can export both class-based modules and function-based modules. as shown below.

Syntax for export class-based module:

export class CLASS_NAME {    constructor(para1 , para2) {}    Method() {      console.log("This is class-based Module export" );    }  }

Syntax for export function-based module:

export function FUNCTION_NAME {      console.log("This is function-based Module export");  }

Ways to Import External Modules: In TypeScript, we use the keyword import and from to import a particular module or a named parameter. Let’s see the different ways we can use the import operation.

1. Import Default Export: In order to import the default export from a file, we can use the from location of the file and use the keyword import before it, or we could give a specific name i.e. MODULE_NAME to the import which makes the syntax as the following.

import MODULE_NAME from './MODULE_LOCATION'

2. Import Named Values: It is not necessary that every file exports default modules, they can have a number of named parameters and in case we need to import one we should use the syntax as follows.

import { MODULE_NAME } from './MODULE_LOCATION'

And similarly, for multiple modules imports, we can use a comma ( , ) separator to separate two-parameter names within the curly braces { }. As shown below.

import { MODULE_NAME1, MODULE_NAME2, ... ,       MODULE_NAMEn } from ./MODULE_LOCATION'

3. Importing a combination of Default Exports and Named Values: The title makes it clear what we need to see is that the syntax of the same. In order to import a combination, we should use the following syntax.

import DEFAULT_EXPORT, { MODULE_NAME1,       MODULE_NAME2, ... , MODULE_NAMEn }       from './MODULE_LOCATION'

4. Import everything from the Module: Sometimes you need to import every module from the specific file, then you can use ( * ) asterisk to import all modules and assign them to an object ( OBJ_NAME ) as shown below

import * as OBJ_NAME from './MODULE_LOCATION'

Or you can use:

import MODULE = require('LOCATION')

Now we implement what we learn above using the following examples:

Example 1: Import a default export module from a file to another file.

Module1.ts

// Exporting the Default export module // which is used in another file // export default keyword used to  // Export the module export default function GFG() {     return "GeeksforGeeks"; }

Module2.ts

// Importing the default export module  // from the location of the file. import GFG from "./MODULE1";  // Creating an object of the // class which is imported let msg = GFG();  console.log("This is MSG from ");  console.log(msg);

Steps to print output: First, convert the TypeScript file into JavaScript for that you need to run the following command on your respective terminal.

> tsc MODULE2.ts

After that, you need to run a JavaScript file using the Node module. as shown below.

> node MODULE2.js

Output:

Example 2: Import a class from a file to another file.

Module1.ts

// Exporting the class which used in another file // export keyword used to Export the module export class GFG {       StringConcat(banner) {         return "Welcome to " + banner;       } }

Module2.ts

// Importing the module // from the location of the file. import { GFG } from "./Module1";  let obj1 = new GFG();  console.log(obj1.StringConcat("GeeksforGeeks"));

Steps to print output:

> tsc MODULE2.ts  > node MODULE2.js

Output:

Example 3: Import all modules from a file to another file.

Module1.ts

// Export all the classes functions  export function Welcome(str: string) {   return "Hello " + str + "..!"; }  export class Geeks {   msg(str1: string) {     return "Welcome to " + str1;   } }

Module2.ts

// Importing everything from the MODULE1.ts  // using 'import *' and 'as' keyword  import * as AllImports from "./MODULE1";  // Variables created let str = "Geeks"; let str1 = "GeeksforGeeks";  // Calling function using common import // name i.e. AllImport console.log(AllImports.Welcome(str));  // Object of imported class is created let obj = new AllImports.Geeks();  // Calling the import class function // using object name console.log(obj.msg(str1));