How to Import Another TypeScript Files?

To use code from one TypeScript file in another, we use the module system introduced in ECMAScript 2015. This allows us to export functions, classes, or variables from one file and import them into another. By doing this, we can reuse code from previous projects without having to rewrite it. This makes our code easier to manage and keeps everything organized.

Modules are reusable codes that can be used as building blocks in programming. They allow developers to separate private and public members, making it easier to manage and organize code. You can think of modules like classes in other object-oriented programming languages. To use code from a different module, you need to import it using one of the available import methods. This helps maintain a clean and efficient code structure while promoting reusability.

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

This code file will be imported and the file name as exportedFile.ts in a directory.

// exportedFile.ts

// 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+ "!";
    }
}

This code file will be import the above code, and save this file as the name mainFile.ts in the same directory.

// mainFile.ts

// Importing the class from the location of the file
import { exportedFile } from "./exportedFile";

// Creating an object of the class which is imported
let user = new exportedFile();

// Calling the imported class function
console.log(user.sayHello("Geek"));

Output:

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.

Save this file as a exportedFile.ts

// exportedFile.ts

// Exporting the function which will be
// used in another file
export function sayHello(user:string) {
    return "Hello " + user + "!";
}

Save this file as a mainFile.ts

// mainFile.ts

// Importing the function sayHello and renaming it 
// from the location of the file
import { sayHello as hello } from "./exportedFile";

let user = "Jake";

// Calling the imported function
console.log(hello(user));

Output:

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 *’.

Save this file as a exportedFile.ts

// 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 + "!";
}

Save this file as a mainFile.ts

// 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 function
console.log(importAll.sayHello(user));

// Implementing the imported interface
class hru implements importAll.howareYou {
    howareyou(user: string){
        return "How are you "+user+"!";
    }
}

// Calling the implemented function in the 
// Interface which is imported
let jd = new hru();
console.log(jd.howareyou(user));

// Creating the object of the imported class
// and calling it's function
let bye = new importAll.sayGoodByeTo();
console.log(bye.goodbye(user));

Output:

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.

arnubop

Follow

Improve

Article Tags :

• JavaScript
• TypeScript
• Web Technologies