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

// 文件名：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

TypeScript 模块

TypeScript 模块

内部模块

外部模块

模块声明

编译和执行模块

在单个文件中导入多个模块

编译和执行多个模块

重新导出

编译和执行模块

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

TypeScript 基础教程

回顶部

TypeScript 模块

内部模块

外部模块

模块声明

编译和执行模块

在单个文件中导入多个模块

编译和执行多个模块

重新导出

编译和执行模块

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

TypeScript 基础教程

回顶部

切换注册登录

用户名或邮箱

密码

切换登录注册

昵称

邮箱