在 JavaScript 或 TypeScript 中导入 2 个具有相同名称的类

在 TypeScript 中导入两个同名的类

要导入两个具有相同名称的类，请使用as关键字重命名其中一个或两个导入，例如
import { Employee as Employee2 } from './another-file-2';. as关键字允许我们更改导入的标识名称。

下面是一个文件示例，它导入了从另外两个文件中index.ts命名的 2 个类
。Employee

索引.ts


import { Employee } from './another-file-1';

// 👇️ rename to Employee2
import { Employee as Employee2 } from './another-file-2';

const emp1 = new Employee(100, 'design');

const emp2 = new Employee2(1, 'James Doe');

如果您使用 JavaScript（而不是 TypeScript），请向下滚动到下一个副标题。

以下是的内容another-file-1.ts。

另一个文件 1.ts


export class Employee {
  constructor(public salary: number, public department: string) {
    this.salary = salary;
    this.department = department;
  }
}

这是的内容another-file-2.ts。

另一个文件 2.ts


export class Employee {
  constructor(public id: number, public name: string) {
    this.id = id;
    this.name = name;
  }
}

文件中的导入路径index.ts假定其他文件位于同一目录中。例如，如果类位于上一级目录，则必须从'../another-file-1'.

您可以在导入和导出中使用
as
关键字。

例如，我们可以使用不同的名称导出其中一个类。

另一个文件 1.ts


class Employee {
  constructor(public salary: number, public department: string) {
    this.salary = salary;
    this.department = department;
  }
}

export { Employee as Employee1 }; // 👈️ export as Employee1

Employee我们将类的导出重命名为Employee1，所以现在您可以将其导入为：

索引.ts


import { Employee1 } from './another-file-1';

import { Employee as Employee2 } from './another-file-2';

const emp1 = new Employee1(100, 'design');

const emp2 = new Employee2(1, 'James Doe');

关键字可as用于重命名导入和导出。

如果您的一个或两个类使用默认导出，则不必使用
as关键字，因为您可以在导入时直接重命名默认导出。

另一个文件 1.ts


// 👇️ uses default export
export default class Employee {
  constructor(public salary: number, public department: string) {
    this.salary = salary;
    this.department = department;
  }
}

现在我们可以在不使用
关键字的情况下导入Employee类。Employee1as

索引.ts


// 👇️ can directly rename when importing
import Employee1 from './another-file-1';

import { Employee as Employee2 } from './another-file-2';

const emp1 = new Employee1(100, 'design');

const emp2 = new Employee2(1, 'James Doe');

命名和默认导出和导入之间的主要区别是 – 每个文件可以有多个命名导出，但只能有一个默认导出。

如果您尝试在单个文件中使用多个默认导出（用于函数、类、变量），则会出现错误。

以我的经验，大多数真实世界的代码库只使用命名的导出和导入，因为它们可以更轻松地利用您的 IDE 进行自动完成和自动导入。

在 JavaScript 中导入两个同名的类

要导入两个具有相同名称的类，请使用as关键字重命名其中一个或两个导入，例如
import {Employee as Employee2} from './another-file-2.js';. as关键字允许我们更改导入的标识名称。

下面是一个文件示例，它导入了从另外两个文件中index.js命名的 2 个类
。Employee

索引.js


import {Employee} from './another-file-1.js';

// 👇️ rename to Employee2
import {Employee as Employee2} from './another-file-2.js';

const emp1 = new Employee('Alice', 100);
console.log(emp1.name); // 👉️ 'Alice'

const emp2 = new Employee2(1, 'web developer');
console.log(emp2.department); // 👉️ 'web developer'

以下是的内容another-file-1.js。

另一个文件 1.js


// 👇️ named export
export class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

这是的内容another-file-2.js。

另一个文件 2.js


// 👇️ named export
export class Employee {
  constructor(id, department) {
    this.id = id;
    this.department = department;
  }
}

文件中的导入路径index.js假定其他文件位于同一目录中。例如，如果类位于上一级目录，则必须从'../another-file-1.js'.

您可以使用
as
关键字重命名导入和导出。

例如，我们可以使用不同的名称导出其中一个类。

另一个文件 1.js


class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

export {Employee as Employee1}; // 👈️ export as Employee1

Employee我们将类的导出重命名为Employee1，所以现在您可以将其导入为：

索引.js


import {Employee1} from './another-file-1.js';

import {Employee as Employee2} from './another-file-2.js';

const emp1 = new Employee1('Alice', 100);
console.log(emp1.name); // 👉️ 'Alice'

const emp2 = new Employee2(1, 'web developer');
console.log(emp2.department); // 👉️ 'web developer'

关键字可as用于重命名导入和导出。

如果您的一个或两个类使用默认导出，则不必使用
as关键字，因为您可以在导入时直接重命名默认导出。

另一个文件 1.js


// 👇️ uses default export
export default class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

现在，我们可以在不使用
关键字的情况下导入Employee类。Employee1as

索引.js


// 👇️ can directly rename when import (because default export)
import Employee1 from './another-file-1.js';

import {Employee as Employee2} from './another-file-2.js';

const emp1 = new Employee1('Alice', 100);
console.log(emp1.name); // 👉️ 'Alice'

const emp2 = new Employee2(1, 'web developer');
console.log(emp2.department); // 👉️ 'web developer'

命名和默认导出和导入之间的主要区别是 – 每个文件可以有多个命名导出，但只能有一个默认导出。

如果您尝试在单个文件中使用多个默认导出（用于函数、类、变量），则会出现错误。

以我的经验，大多数真实世界的代码库只使用命名的导出和导入，因为它们可以更轻松地利用您的 IDE 进行自动完成和自动导入。

–

目录

Import two classes with the same name in TypeScript

在 TypeScript 中导入两个同名的类

在 JavaScript 中导入两个同名的类