TypeScript - Modules
In this section, we will learn about Modules in TypeScript.
The TypeScript code we write is in the global scope by default. If we have multiple files in a project, the variables, functions, etc. written in one file are accessible in all the other files.
For example, consider the following TypeScript files: file1.ts and file2.ts
var greeting : string = "Hello World!";
console.log(greeting); //Prints Hello World!
greeting = "Hello TypeScript"; // allowed
The above variable greeting, declared in file1.ts is accessible in file2.ts as well. Not only it is accessible but also it is open to modifications. Anybody can easily override variables declared in the global scope without even knowing they are doing so! This is a dangerous space as it can lead to conflicts/errors in the code.
TypeScript provides modules and namespaces in order to prevent the default global scope of the code and also to organize and maintain a large code base.
Modules are a way to create a local scope in the file. So, all variables, classes, functions, etc. that are declared in a module are not accessible outside the module. A module can be created using the keyword export
and a module can be used in another module using the keyword import
.
In TypeScript, files containing a top-level export or import are considered modules. For example, we can make the above files as modules as below.
export var greeting : string = "Hello World!";
console.log(greeting); //Error: cannot find 'greeting'
greeting = "Hello TypeScript";
In file1.ts, we used the keyword export
before the variable. Now, accessing a variable in file2.ts will give an error.
This is because greeting
is no longer in the global scope.
In order to access greeting
in file2.ts, we must import the file1 module into file2 using the import keyword.
Export Module
A module can be defined in a separate .ts file which can contain functions, variables, interfaces and classes. Use the prefix export with all the definitions you want to include in a module and want to access from other modules.
export let age : number = 20;
export class Employee {
empCode: number;
empName: string;
constructor(name: string, code: number) {
this.empName = name;
this.empCode = code;
}
displayEmployee() {
console.log ("Employee Code: " + this.empCode + ", Employee Name: " + this.empName );
}
}
let companyName:string = "XYZ";
In the above example, Employee.ts
is a module which contains two variables and a class definition.
The age
variable and the Employee
class are prefixed with the export keyword, whereas companyName
variable is not.
Thus, Employee.ts
is a module which exports the age
variable and the Employee
class to be used in other modules by importing the Employee
module using the import keyword.
The companyName
variable cannot be accessed outside this Employee
module, as it is not exported.
Import Module
A module can be used in another module using an import statement.
Import { export name } from "file path without extension"
Let's see different ways of importing a module export.
Importing a Single export from a Module:
We exported a variable and a class in the Employee.ts
. However, we can only import the export module which we are going to use.
The following code only imports the Employee
class from Employee.ts
into another module in the EmployeeProcessor.ts
file.
import { Employee } from "./Employee";
let empObj = new Employee("Steve Jobs", 1);
empObj.displayEmployee(); //Output: Employee Code: 1, Employee Name: Steve Jobs
Importing Module into Variable
You can import all the exports in a module as shown below.
import * as Emp from "./Employee"
console.log(Emp.age); // 20
let empObj = new Emp.Employee("Bill Gates" , 2);
empObj.displayEmployee(); //Output: Employee Code: 2, Employee Name: Bill Gates
In the above example, we import all the exports in Employee
module in a single variable called Emp
.
So, we don't need to write an export statement for each individual module. In the above example, it will import age
and Employee
class into the Emp
variable and can be accessed using Emp.age
and Emp.Employee
.
Renaming Export Module
You can change the name of an export as shown below.
import { Employee as Associate } from "./Employee"
let obj = new Associate("James Bond" , 3);
obj.displayEmployee();//Output: Employee Code: 3, Employee Name: James Bond
In the above example, the name of Employee
export class is changed to Associate
using { employee as Associate }
.
This is useful in assigning a more meaningful name to an export, as per your need which increases the readability.
Now, once we define our modules in .ts
files, we need to compile them to get .js
files. Module compilation in TypeScript depends on various things. Learn about module compilation in the next chapter.