极客笔记TypeScript 模块
JavaScript有一个来自于 ECMAScript 2015 的模块的概念。TypeScript也共享了这个模块的概念。
模块是创建一组相关变量、函数、类、接口等的一种方式。它在 本地作用域 中执行，而不是在 全局作用域 中。换句话说，声明在模块中的变量、函数、类和接口不能直接访问模块外部。我们可以使用 export 关键字创建一个模块，并使用 import 关键字在其他模块中使用它。
模块通过使用一个 模块加载器 导入另一个模块。在运行时，模块加载器负责在执行模块之前定位和执行所有依赖项。在JavaScript中最常用的模块加载器有 CommonJS 模块加载器（用于 Node.js ）和 require.js （用于Web应用程序）。
我们可以将模块分为 两个 类别：
- 内部模块
- 外部模块
内部模块
内部模块在早期版本的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 关键字在其他文件中使用声明模块。指定的文件/模块名称无需带有 扩展名 。
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
输出：
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";
在下面的示例中，将 Addition 导出类的名称更改为 plus 使用{Addition as plus}。重新导出在为导出项分配更有意义的名称时非常有用，这提高了我们程序的可读性。
使用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