📌  相关文章
📜  如何导入另一个 TypeScript 文件?

📅  最后修改于: 2022-05-13 01:56:33.040000             🧑  作者: Mango

如何导入另一个 TypeScript 文件?

有时我们想要一些我们在以前的项目中使用过的工具,在这种情况下,我们无法再次重写该脚本,我们可以通过使该文件可导出来简单地导入它。要将其他 TypeScript 文件导入现有的 TypeScript 文件,我们应该了解模块的概念。从ECMAScript 2015开始,JavaScript 有了模块的概念,TypeScript 也共享这个概念。

模块是希望用作构建块的独立、可重用代码的小单元。模块让开发人员可以分别定义私有成员和公共成员,使其成为脚本范例中更受欢迎的设计模式之一。您可以将模块视为任何其他面向对象编程语言中的类。从不同的模块导出,必须使用其中一种导入形式导入。

示例 1:将一个类从一个文件导入到另一个文件。

  • 代码1:将导入此代码文件,并将文件名为exportedFile.ts保存在一个目录中。
    // Exporting the class which will be
    // used in another file
    // Export keyword or form should be
    // used to use the class 
    export class exportedFile {
      
        // Class method which prints the
        // user called in another file
        sayHello(user){
            return "Hello " + user+ "!";
        }
    }
    
  • 代码2:此代码文件将导入上述代码,并将此文件命名为mainFile.ts保存在同一目录下。
    // Importing the class from the location of the file
    import { exportedFile } from "./exportedFile";
      
    // Creating an object of the class which is imported
    let user = new exportedFile();
      
    // Calling the imported class function
    console.log(user.sayHello("Geek"));
    
  • 输出:
    Hello Geek!

注意:您必须编译mainFile.ts ,它将生成运行 js 文件的mainFile.js

在要导入的 TypeScript 文件中必须包含导出表单,并且导入类的主文件必须包含导入表单,TypeScript 可以通过该导入表单识别所使用的文件。通过使用这种类型的导出导入表单,我们可以导入任何我们想要的类、接口、函数、变量

示例 2:我们也可以根据需要通过重命名它们来导入它们。通过重命名函数从另一个文件导入函数。

  • 代码1:将此文件另存为exportedFile.ts
    // Exporting the function which will be
    // used in another file
    export function sayHello(user:string) {
        return "Hello " + user + "!";
    }
    
  • 代码 2:将此文件另存为mainFile.ts
    // Importing the function sayHello and renaming it 
    // from the location of the file
    import { sayHello as hello } from "./exportedFile";
      
    let user = "Jake";
      
    // Calling the imported function
    console.log(hello(user));
    
  • 输出:
    Hello Jake!

示例 3:我们可以使用 import all 形式导入文件的所有内容,如下所示。全部导入表示为'import *'

  • 代码1:将此文件另存为exportedFile.ts
    // Here we have to export all the
    // class, interface, function 
    export class sayGoodByeTo {
        goodbye(user: string) {
            return "Good bye " + user + "!";
        }
    }
    export interface howareYou {
        howareyou(user: string) : string;
    }
    export function sayHello(user:string) {
        return "Hello " + user + "!";
    }
    
  • 代码 2:将此文件另存为mainFile.ts
    // Importing everything from the exportedFile.ts module
    // Import all is indicated using 'import *' 
    // and here 'as' keyword 
    import * as importAll from "./exportedFile";
    let user = "Geeks";
      
    // Calling the imported function
    console.log(importAll.sayHello(user));
      
    // Implementing the imported interface
    class hru implements importAll.howareYou {
        howareyou(user: string){
            return "How are you "+user+"!";
        }
    }
      
    // Calling the implemented function in the 
    // Interface which is imported
    let jd = new hru();
    console.log(jd.howareyou(user));
      
    // Creating the object of the imported class
    // and calling it's function
    let bye = new importAll.sayGoodByeTo();
    console.log(bye.goodbye(user));
    
  • 输出:
    Hello Geeks!
    How are you Geeks!
    Good bye Geeks!
    

注意:要全部导入,需要重命名模块。当我们使用as关键字时,它基本上将所有类、函数、接口包装在一个模块中。我们也可以通过简单地编写多个导入表单和模块位置来导入多个文件。