TypeScript 模块

JavaScript 从 ECMAScript 2015 引入了模块的概念。TypeScript 也共享了这个模块的概念。

模块是一种方法，可以创建相关变量、函数、类和接口等组。它在本地范围中执行，而不是在全局范围中执行。换句话说，在模块中声明的变量、函数、类和接口不能直接访问模块外部。我们可以使用export关键字创建模块，并使用import关键字在其他模块中使用。

模块使用模块加载器导入另一个模块。在运行时，模块加载器负责在执行模块之前定位和执行模块的所有依赖项。在 JavaScript 中使用的最常用模块加载器是Node.js的CommonJS模块加载器和Web应用程序的require.js。

我们可以将模块分为两个类别：

1. 内部模块
2. 外部模块

内部模块

内部模块位于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关键字声明模块。模块声明的语法如下所示。

// 文件名：EmployeeInterface.ts
export interface Employee {
   // 代码声明
}

我们可以在其他文件中使用import关键字声明模块，如下所示。文件/模块名称指定时不需要扩展名。

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））;
    }
}

通过使用导入关键字在另一个文件中访问模块：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））;
    }
}

通过使用导入关键字在另一个文件中访问模块：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

// 从Modules文件重新导出Addition类型作为plus
export { Addition as plus } from "./Modules";

在下面的示例中，使用{Addition as plus}将Addition导出类的名称更改为plus。重新导出对于为导出分配更有意义的名称很有用，这提高了我们程序的可读性。

通过使用导入关键字在另一个文件中访问模块：app.ts

// 从re-exports文件中导入导出类型
import {plus as Addition} from './re-exports';  //将plus导入为Addition

let addObject = new Addition(10, 20);

addObject.Sum();

编译和执行模块

打开终端并转到存储项目的位置。现在，输入以下命令。

$ tsc --module commonjs app.ts
$ node ./app.js

输出：

Sum: 30