个性化阅读
专注于IT技术分析

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 Addition  
  
let addObject = new Addition(10, 20);   
  
addObject.Sum();  

编译和执行模块

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

$ tsc --module commonjs app.ts  
$ node ./app.js  
赞(0)
未经允许不得转载:srcmini » TypeScript模块:内部模块和外部模块 – TypeScript开发教程

评论 抢沙发

评论前必须登录!