📅 最后修改于: 2021-01-11 12:49:27 🧑 作者: Mango
JavaScript具有ECMAScript 2015中的模块概念。 TypeScript具有模块的这一概念。
模块是一种创建一组相关变量，函数，类和接口等的方法。它在本地范围而不是全局范围内执行。换句话说，在模块中声明的变量，函数，类和接口不能直接在模块外部访问。我们可以使用export关键字创建一个模块，也可以通过使用import关键字在其他模块中使用。
模块通过使用模块加载器导入另一个模块。在运行时，模块加载程序负责在执行模块之前查找并执行模块的所有依赖关系。 JavaScript中最常用的模块加载器是Node.js的CommonJS模块加载器，Web应用程序的require.js。
我们可以将模块分为两大类：
内部模块在Typescript的早期版本中。它用于将类，接口，函数，变量进行逻辑分组到单个单元中，并且可以导出到另一个模块中。在最新版本的TypeScript中，模块被命名为命名空间。所以今天，内部模块已经过时了。但是通过在内部模块上使用名称空间仍然支持它们。
早期版本中的内部模块语法：
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 declarations
}
我们可以通过使用import关键字在其他文件中使用clarify模块，如下所示。指定的文件/模块名称不带扩展名。
import { class/interface name } from 'module_name';
例
让我们通过以下示例了解模块。
模块创建： additional.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
输出：
Sum: 30
我们可以在一个文件中定义多个模块。下面给出了多模块声明的语法。
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
输出：
SUM: 30
SUBTRACTION: 10
在TypeScript中，模块有时会扩展其他模块，并部分暴露其某些功能。重新导出不会将其导入本地或引入局部变量。在这种情况下，我们可以使用其原始名称或将其重命名来重新导出其某些功能。
例
让我们通过以下示例了解模块的重新导出概念。
模块创建： Modules.ts
export class Addition{
constructor(private x?: number, private y?: number){
}
Sum(){
console.log("SUM: " +(this.x + this.y));
}
}
创建重新导出模块： re-exports.ts
// Re-exporting types Addition as plus from Modules file
export { Addition as plus } from "./Modules";
在下面的例子中，添加出口类的名称被改变为加使用{添加作为加}。重新导出有助于为导出分配更有意义的名称，从而增加程序的可读性。
通过使用import关键字app.ts访问另一个文件中的模块
//importing the exporting types from re-exports file
import {plus as Addition} from './re-exports'; //importing plus as Addition
let addObject = new Addition(10, 20);
addObject.Sum();
打开终端，然后转到存储项目的位置。现在，键入以下命令。
$ tsc --module commonjs app.ts
$ node ./app.js
输出：
Sum: 30