如何在TypeScript中引入模块

在开始引入模块之前，首先我们需要了解TypeScript中模块的基础知识。

我们知道，JavaScript自2015年ES6版本开始引入了模块的概念，并且到2020年已经在大多数web浏览器和JavaScript运行时得到广泛支持。TypeScript也共享相同的模块概念。任何包含顶级导入或导出的文件都被视为模块。

模块旨在将TypeScript中编写的代码组织为本地作用域。模块基本上是在单独文件中编写的脚本。通过导入，可以在现有文件中引用它们的源位置。现在我们将了解不同的导入外部模块的方法，并了解如何在所需位置使用该模块。

方法： 在导入任何模块之前，我们需要从另一个文件中将其导出。我们可以使用 export 关键字创建模块，并使用 import 关键字在其他模块中使用它。我们既可以导出基于类的模块，也可以导出基于函数的模块，如下所示。

基于类的模块导出语法：

export class CLASS_NAME {
  constructor(para1 , para2) {}
  Method() {
    console.log("This is class-based Module export" );
  }
}

基于函数的模块导出语法：

export function FUNCTION_NAME {
    console.log("This is function-based Module export");
}

导入外部模块的方式： 在TypeScript中，我们使用关键字 _import _ 和 _from _ 来导入特定的模块或命名参数。让我们看看我们可以使用导入操作的不同方式。

1. 导入默认导出： 为了从文件导入默认导出，我们可以使用文件的 from 位置，并在其之前使用关键字 import ，或者我们可以给导入指定一个特定的名称，即MODULE_NAME，使语法如下所示。

import MODULE_NAME from './MODULE_LOCATION'

2. 导入命名值： 并不是每个文件都导出默认模块，它们可以有多个命名参数，如果我们需要导入其中一个，我们应该使用以下语法。

import { MODULE_NAME } from './MODULE_LOCATION'

对于多个模块的导入，我们可以使用逗号（,）分隔符来分隔花括号内的两个参数名称。如下所示。

import { MODULE_NAME1, MODULE_NAME2, ... , 
    MODULE_NAMEn } from ./MODULE_LOCATION'

3. 导入默认导出和命名值的组合： 标题明确了我们需要看到的是相同的语法。为了导入组合，我们应该使用以下语法。

import DEFAULT_EXPORT, { MODULE_NAME1, 
    MODULE_NAME2, ... , MODULE_NAMEn } 
    from './MODULE_LOCATION'

4. 导入模块的所有内容： 有时您需要从特定文件中导入每个模块，那么可以使用（*）星号将所有模块导入并将它们赋值给一个对象（OBJ_NAME），如下所示。

import * as OBJ_NAME from './MODULE_LOCATION'

或者你可以使用：

import MODULE = require('LOCATION')

现在我们使用以下示例来实现上述所学：

示例 1： 从一个文件中导入默认导出模块到另一个文件中。

// 导出默认的导出模块
// 在另一个文件中使用
// 使用 export default 关键字
// 导出模块
export default function GFG() {
    return "GeeksforGeeks";
}

// 从文件位置导入默认的导出模块
import GFG from "./MODULE1";

// 创建一个被导入的类的对象
let msg = GFG();

console.log("This is MSG from ");

console.log(msg);

输出步骤: 首先，将TypeScript文件转换为JavaScript，您需要在相应的终端上运行以下命令。

> tsc MODULE2.ts

然后，您需要使用Node模块运行JavaScript文件。如下所示。

> node MODULE2.js

输出:

如何在TypeScript中引入模块

例子2: 将一个类从一个文件导入到另一个文件。

// 导出在另一个文件中使用的类
export class GFG {
      StringConcat(banner) {
        return "Welcome to " + banner;
      }
}

// 从文件位置导入模块
import { GFG } from "./Module1";

let obj1 = new GFG();

console.log(obj1.StringConcat("GeeksforGeeks"));

输出步骤:

> tsc MODULE2.ts
> node MODULE2.js

输出:

如何在TypeScript中引入模块

例子3: 将一个文件中的所有模块导入到另一个文件中。

// 导出所有的类和函数

export function Welcome(str: string) {
  return "Hello " + str + "..!";
}

export class Geeks {
  msg(str1: string) {
    return "Welcome to " + str1;
  }
}

// 使用 'import *' 和 'as' 关键字
// 从 MODULE1.ts 导入所有内容

import * as AllImports from "./MODULE1";

// 创建变量
let str = "Geeks";
let str1 = "GeeksforGeeks";

// 使用通用导入名称 AllImports
// 调用函数
console.log(AllImports.Welcome(str));

// 创建导入类的对象
let obj = new AllImports.Geeks();

// 使用对象名称调用导入类函数
console.log(obj.msg(str1));