TypeScript 如何导入模块

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

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

模块的设计是为了将使用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： 从一个文件导入一个默认导出模块到另一个文件。

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

输出：

TypeScript 如何导入模块

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

Module1.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; 
      } 
}

Module2.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

输出：

TypeScript 如何导入模块

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

Module1.ts

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

Module2.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));

打印输出的步骤：