How to Import another TypeScript Files ? - GeeksforGeeks

02 Mar, 2020
Some times we want some facility that we have been used in our previous projects, in that situation we can’t rewrite that script again we can simply import that by making that file exportable. To import other TypeScript files into an existing TypeScript file we should know the concept of modules. Starting with ECMAScript 2015, JavaScript has a concept of modules and TypeScript shares this concept.
Modules are small units of independent, reusable code that is desired to be used as the building blocks. Modules let the developer define private and public members separately, making it one of the more desired design patterns in the script paradigm. You may see modules as Classes as in any other Object-Oriented Programming Language. Exported from a different module, it has to be imported using one of the import forms.
Example 1: Import a class from a file to another file.
Code 1: This code file will be imported and save the file name as exportedFile.ts in a directory.// Exporting the class which will be// used in another file// Export keyword or form should be// used to use the class export class exportedFile {      // Class method which prints the    // user called in another file    sayHello(user){        return "Hello " + user+ "!";    }}
// Exporting the class which will be// used in another file// Export keyword or form should be// used to use the class export class exportedFile {      // Class method which prints the    // user called in another file    sayHello(user){        return "Hello " + user+ "!";    }}
Code 2: This code file will be import the above code, and save this file as the name mainFile.ts in the same directory.// Importing the class from the location of the fileimport { exportedFile } from "./exportedFile";  // Creating an object of the class which is importedlet user = new exportedFile();  // Calling the imported class functionconsole.log(user.sayHello("Geek"));
// Importing the class from the location of the fileimport { exportedFile } from "./exportedFile";  // Creating an object of the class which is importedlet user = new exportedFile();  // Calling the imported class functionconsole.log(user.sayHello("Geek"));
Output:Hello Geek!
Hello Geek!
Note: You have to compile the mainFile.ts that will generate the mainFile.js that run js file.
In the TypeScript file which is to be imported must include an export form and the main file where the class is imported must contain an import form, by which TypeScript can identify the file which is used. By using this type of export and import forms we can import classes, interfaces, functions, variables anything that we want.
Example 2: We can also import them by renaming them as of our needs. Importing a function from another file by renaming the function.
Code 1: Save this file as a exportedFile.ts// Exporting the function which will be// used in another fileexport function sayHello(user:string) {    return "Hello " + user + "!";}
// Exporting the function which will be// used in another fileexport function sayHello(user:string) {    return "Hello " + user + "!";}
Code 2: Save this file as a mainFile.ts// Importing the function sayHello and renaming it // from the location of the fileimport { sayHello as hello } from "./exportedFile";  let user = "Jake";  // Calling the imported functionconsole.log(hello(user));
// Importing the function sayHello and renaming it // from the location of the fileimport { sayHello as hello } from "./exportedFile";  let user = "Jake";  // Calling the imported functionconsole.log(hello(user));
Output:Hello Jake!
Hello Jake!
Example 3: We can import all the contents of a file by using import all form as shown below. Import all is indicated as ‘import *’.
Code 1: Save this file as a exportedFile.ts// Here we have to export all the// class, interface, function export class sayGoodByeTo {    goodbye(user: string) {        return "Good bye " + user + "!";    }}export interface howareYou {    howareyou(user: string) : string;}export function sayHello(user:string) {    return "Hello " + user + "!";}
// Here we have to export all the// class, interface, function export class sayGoodByeTo {    goodbye(user: string) {        return "Good bye " + user + "!";    }}export interface howareYou {    howareyou(user: string) : string;}export function sayHello(user:string) {    return "Hello " + user + "!";}
Code 2: Save this file as a mainFile.ts// Importing everything from the exportedFile.ts module// Import all is indicated using 'import *' // and here 'as' keyword import * as importAll from "./exportedFile";let user = "Geeks";  // Calling the imported functionconsole.log(importAll.sayHello(user));  // Implementing the imported interfaceclass hru implements importAll.howareYou {    howareyou(user: string){        return "How are you "+user+"!";    }}  // Calling the implemented function in the // Interface which is importedlet jd = new hru();console.log(jd.howareyou(user));  // Creating the object of the imported class// and calling it's functionlet bye = new importAll.sayGoodByeTo();console.log(bye.goodbye(user));
// Importing everything from the exportedFile.ts module// Import all is indicated using 'import *' // and here 'as' keyword import * as importAll from "./exportedFile";let user = "Geeks";  // Calling the imported functionconsole.log(importAll.sayHello(user));  // Implementing the imported interfaceclass hru implements importAll.howareYou {    howareyou(user: string){        return "How are you "+user+"!";    }}  // Calling the implemented function in the // Interface which is importedlet jd = new hru();console.log(jd.howareyou(user));  // Creating the object of the imported class// and calling it's functionlet bye = new importAll.sayGoodByeTo();console.log(bye.goodbye(user));
Output:Hello Geeks!
How are you Geeks!
Good bye Geeks!

Hello Geeks!
How are you Geeks!
Good bye Geeks!

Note: To import all, it is necessary to rename the module. It is basically wrapping all the class, function, interface in a single module when we are using the as keyword. We can also import multiple files by simply writing multiple import forms and module location.
Picked
TypeScript
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?