. Advertisement .
..3..
. Advertisement .
..4..
Some readers are in the dark about methods of importing a type from another file via TypesScript. All in all, the concept is easy to grasp. These three cases below will shed some light on the matter.
Examples of Importing A Type from Another File Via Typescript
Example 1. Import A File Class From A File
Let’s look at an example.
- We will import this file, saving its name in the directory as “exportedDoc.ts”:
// Exporting the class which will be
// used in another file
// Export keyword or form should be
// used to use the class
export class exportedDoc {
// Class method which prints the
// user called in another file
sayHi(user){
return "Hi " + user+ "!";
}
}
- Next, we will import the following code file to the code above, saving it in that same directory as “mainDoc.ts”:
// Importing the class from the location of the file
import { exportedDoc } from "./exportedDoc";
// Creating an object of the class which is imported
let user = new exportedDoc();
// Calling the imported class function
console.log(user.sayHi("ITtutoria"));
- Output:
Hi ITtutoria!
Here’s one thing to remember: it’s a must to compile your “mainDoc.ts”, which will generate a “mainDoc.js” that runs your Js file.
The Typescript files you will import must entail one export form and your main file. The latter, where you will import the class, has to contain one import form so that TypeScript can use it to identify the used file.
When using these import and export forms, it’s possible to import functions, classes, interfaces, variables, or anything you like.
Example 2. Import Functions From A File
- First, we will save the file as “exporteddoc.ts”:
// Exporting the function which will be
// used in another file
export function sayHi(user:string) {
return "Hi" + user + "!";
}
- Next, we save the following file as “mainDoc.ts”:
// Importing the function sayHi and renaming it
// from the location of the file
import { sayHi as hi } from "./exportedDoc";
let user = "Jame";
// Calling the imported function
console.log(hi(user));
- Output
Hi Jame!
Example 3. Import File Contents From A File
(‘import *’ means importing all)
- First, let’s save the following file as “ExportedDoc.ts”, just like the other two previous examples.
// Here we have to export all the
// class, interface, function
export class sayGoodMorningTo {
goodmorning(user: string) {
return "Good morning " + user + "!";
}
}
export interface whatsUp {
whatsup(user: string) : string;
}
export function sayHi(user:string) {
return "Hi " + user + "!";
}
- Next, save the following file as “mainDoc.ts”
// Importing everything from the exportedDoc.ts module
// Import all is indicated using 'import *'
// and here 'as' keyword
import * as importAll from "./exportedDoc";
let user = "ITtutoria";
// Calling the imported function
console.log(importAll.sayHi(user));
// Implementing the imported interface
class hru implements importAll.whatsUp {
whatsup(user: string){
return "Whats up "+user+"!";
}
}
// Calling the implemented function in the
// Interface which is imported
let jd = new hru();
console.log(jd.whatsup(user));
// Creating the object of the imported class
// and calling it's function
let morning = new importAll.sayGoodMorningTo();
console.log(morning.goodmorning(user));
- Output:
Hi ITtutoria!
Whats up ITtutoria!
Good morning ITtutoria!
If you want to import everything, it’s a must to give the module a new name. Basically, you will wrap all the function, class, and interface in one module during our usage of the keyword “as”. It’s also possible to import several files at once by writing more than one module location and import form.
Conclusion
This article has delivered three examples of importing a type from another file via TypeScript. Hopefully, you can pick up some useful tips from our in-depth instruction. For other tips on file importation (such as importing Excel files in Python), keep browsing our website.
Leave a comment