上一章TypeScript教程请查看:TypeScript使用名称空间
JavaScript有来自ECMAScript 2015的模块概念,TypeScript共享模块的这个概念。
模块是一种创建一组相关变量、函数、类和接口等的方法。它在本地范围内执行,而不是在全局范围内执行。换句话说,在模块中声明的变量、函数、类和接口不能在模块外部直接访问。我们可以使用export关键字创建模块,也可以在其他模块中使用import关键字。
模块通过使用模块加载器导入另一个模块。在运行时,模块加载器负责在执行模块之前定位和执行模块的所有依赖项。JavaScript中最常用的模块加载器是用于Node.js的CommonJS模块加载器和用于Web应用程序的require.js模块加载器。
我们可以将模块分为两类:
- 内部模块
- 外部模块
早期版本的内部模块语法:
module Sum {
export function add(a, b) {
console.log("Sum: " +(a+b));
}
}
ECMAScript 2015内部模块语法:
namespace Sum {
export function add(a, b) {
console.log("Sum: " +(a+b));
}
}
外部模块外部模块也称为模块。当应用程序包含数百个文件时,如果没有模块化方法,几乎不可能处理这些文件。外部模块用于指定多个外部js文件之间的加载依赖关系。如果应用程序只有一个js文件,那么外部模块就不相关。ECMAScript 2015(ES6)模块系统将每个文件视为一个模块。
模块声明我们可以使用export关键字来声明模块。模块声明的语法如下所示。
//FileName : EmployeeInterface.ts
export interface Employee {
//code
}
我们可以使用import关键字在其他文件中使用declare模块,如下所示,指定的文件/模块名没有扩展名。
import { class/interface name } from 'module_name';
例子
让我们通过下面的例子来理解这个模块。
模块创建: addition.ts
export class Addition{
constructor(private x?: number, private y?: number){
}
Sum(){
console.log("SUM: " +(this.x + this.y));
}
}
使用import关键字:app.ts访问另一个文件中的模块
import {Addition} from './addition';
let addObject = new Addition(10, 20);
addObject.Sum();
编译和执行模块打开终端并转到你存储项目的位置。现在,在终端窗口中输入以下命令。
$ tsc --module commonjs app.ts
$ node ./app.js
在一个文件中导入多个模块
我们可以在一个文件中定义多个模块。下面给出了多个模块声明的语法。
import { export_name1, export_name2 } from 'module_name';
例子
让我们通过下面的例子来理解这个模块。
模块创建: Modules.ts
export class Addition{
constructor(private x?: number, private y?: number){
}
Sum(){
console.log("SUM: " +(this.x + this.y));
}
}
export class Substraction{
constructor(private a?: number, private b?: number){
}
Substract(){
console.log("SUBSTRACTION: " +(this.a - this.b));
}
}
使用import关键字: app.ts访问另一个文件中的模块
import{Addition, Substraction} from './Modules';
let addObject = new Addition(10, 20);
let subObject = new Substraction(20, 10);
addObject.Sum();
subObject.Substract();
编译和执行多个模块
打开终端并转到你存储项目的位置。现在,在终端窗口中输入以下命令。
$ tsc --module commonjs app.ts
$ node ./app.js
重新导出在TypeScript中,有时模块会扩展其他模块,并部分公开它们的一些特性。再导出不会在本地导入它或引入本地变量。在这种情况下,我们可以使用它们原来的名称或重命名它们,从而重新导出它们的一些特性。
例子
让我们通过以下示例了解模块的再导出概念。
模块创建: Modules.ts
export class Addition{
constructor(private x?: number, private y?: number){
}
Sum(){
console.log("SUM: " +(this.x + this.y));
}
}
创建再导出模块: re-export .ts
// 从模块文件中重新导出Addition as plus
export { Addition as plus } from "./Modules";
在下面的示例中,使用{Addition as plus}将Addition导出类的名称更改为plus。在为导出分配更有意义的名称时,再导出非常有用,它可以增加程序的可读性。
使用import关键字: app.ts访问另一个文件中的模块
//从转口文件导入导出类型
import {plus as Addition} from './re-exports';
//导入plus as Additionlet addObject = new Addition(10, 20);
addObject.Sum();
编译和执行模块
【TypeScript模块(内部模块和外部模块 – TypeScript开发教程)】打开终端并转到你存储项目的位置。现在,输入以下命令。
$ tsc --module commonjs app.ts
$ node ./app.js
推荐阅读
- TypeScript名称空间和模块的区别 – TypeScript开发教程
- TypeScript使用名称空间 – TypeScript开发教程
- TypeScript类的继承介绍 – TypeScript开发教程
- TypeScript类的用法详解 – TypeScript开发教程
- TypeScript三种函数参数解析 – TypeScript开发教程
- TypeScript函数重载 – TypeScript开发教程
- TypeScript箭头函数用法详解 – TypeScript开发教程
- TypeScript函数使用详解 – TypeScript开发教程
- TypeScript属性访问器 – TypeScript开发教程