如何在 Typescript 中导入模块？

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

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

该模块旨在安排用 TypeScript 编写的代码并用作本地范围。模块基本上是写在单独文件中的脚本。 Import 允许您在现有文件中引用它们的源位置。现在我们将了解导入外部模型的不同方法，并知道如何在所需位置使用该模块。

方法：在导入任何模块之前，我们需要从另一个文件中导出它。我们可以使用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. 导入 Default Exports 和 Named Values 的组合：标题清楚地表明了我们需要看到的是相同的语法。为了导入组合，我们应该使用以下语法。

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：将默认导出模块从一个文件导入另一个文件。

Module1.ts

// Exporting the Default export module
// which is used in another file
// export default keyword used to 
// Export the module
export default function GFG() {
    return "GeeksforGeeks";
}

模块2.ts

// Importing the default export module 
// from the location of the file.
import GFG from "./MODULE1";
  
// Creating an object of the
// class which is imported
let msg = GFG();
  
console.log("This is MSG from ");
  
console.log(msg);

打印输出的步骤：首先，将 TypeScript 文件转换为 JavaScript，您需要在各自的终端上运行以下命令。

> tsc MODULE2.ts

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

> node MODULE2.js

输出：

示例 2：将一个类从一个文件导入到另一个文件。

模块1.ts

// Exporting the class which used in another file
// export keyword used to Export the module
export class GFG {
      StringConcat(banner) {
        return "Welcome to " + banner;
      }
}

模块2.ts

// Importing the module
// from the location of the file.
import { GFG } from "./Module1";
  
let obj1 = new GFG();
  
console.log(obj1.StringConcat("GeeksforGeeks"));

打印输出步骤：

> tsc MODULE2.ts
> node MODULE2.js

输出：

示例 3：将一个文件中的所有模块导入另一个文件。

模块1.ts

// Export all the classes functions
  
export function Welcome(str: string) {
  return "Hello " + str + "..!";
}
  
export class Geeks {
  msg(str1: string) {
    return "Welcome to " + str1;
  }
}

模块2.ts

// Importing everything from the MODULE1.ts 
// using 'import *' and 'as' keyword
  
import * as AllImports from "./MODULE1";
  
// Variables created
let str = "Geeks";
let str1 = "GeeksforGeeks";
  
// Calling function using common import
// name i.e. AllImport
console.log(AllImports.Welcome(str));
  
// Object of imported class is created
let obj = new AllImports.Geeks();
  
// Calling the import class function
// using object name
console.log(obj.msg(str1));

打印输出步骤：

> tsc MODULE2.ts
> node MODULE2.js

输出：