TypeScript 模块

2024 年 8 月 29 日 | 4 分钟阅读

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 关键字在其他文件中使用声明的模块，如下所示。 文件/模块名称的指定不带扩展名。

示例

让我们通过以下示例了解模块。

模块创建：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

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

我们可以在单个文件中定义多个模块。多个模块声明的语法如下所示。

示例

让我们通过以下示例了解模块。

模块创建：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 导出类的名称已使用 {Addition as plus} 更改为 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

下一个主题命名空间 vs 模块

← 上一个下一个 →

TypeScript 模块

内部模块

外部模块

模块声明

编译和执行模块

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

编译和执行多个模块

重新导出

编译和执行模块

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

TypeScript 教程

差异

面试题

TypeScript 模块

内部模块

外部模块

模块声明

编译和执行模块

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

编译和执行多个模块

重新导出

编译和执行模块

相关帖子

TypeScript 字符串

TypeScript 版本

命名空间 vs 模块

Typescript 抽象类

Typescript Duck-Typing

Typescript 构建工具

Typescript forEach

TypeScript 决策制定

从 JavaScript 迁移到 TypeScript

Typescript Date 对象

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器