TypeScript模块(内部模块和外部模块 – TypeScript开发教程)

上一章TypeScript教程请查看:TypeScript使用名称空间
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 }

我们可以使用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

    推荐阅读