从 TypeScript 中的文件导入所有导出

作者

从 TypeScript 中的文件导入所有导出

Import all Exports from a file in TypeScript

要从 TypeScript 中的文件导入所有导出：

  1. 导出您打算从文件导入的所有成员A。
  2. 将文件中的所有导出导入B为
    import * as myNamespace from './another-file'.
  3. myNamespace.myFunction()像在 file中一样使用导入的成员B。

下面是从一个名为
another-file.ts.

另一个文件.ts
// 👇️ All named exports
export function getEmployee() {
  return { id: 1, salary: 100 };
}

export type Employee = {
  id: number;
  salary: number;
};

export interface Person {
  name: string;
}

export function getPerson() {
  return { name: 'James' };
}

下面是我们如何将所有导出导入到一个名为index.ts.

索引.ts
import * as company from './another-file';

const emp: company.Employee = company.getEmployee();
console.log(emp); // 👉️ {id: 1, salary: 100}

const person: company.Person = company.getPerson();
console.log(person); // 👉️ {name: 'James'}

这种模式称为
命名空间导入
，在导入大量内容时使用。

如果必须，请确保更正指向another-file 模块的路径。上面的示例假定和位于同一目录中。 another-file.tsindex.ts

例如，如果another-file.ts位于上一级目录，则必须导入为import * as company from '../another-file'.

TypeScript 使用
模块的概念，就像 JavaScript 一样。

为了能够从不同的文件中导入某些内容，必须使用命名或默认导出来导出它。

上面的示例使用命名导出。

您也可以使用命名导入index.ts并明确说明导入的名称。

索引.ts
// 👇️ named imports
import { getEmployee, Employee, Person, getPerson } from './another-file';

const emp: Employee = getEmployee();
console.log(emp); // 👉️ {id: 1, salary: 100}

const person: Person = getPerson();
console.log(person); // 👉️ {name: 'James'}

上面截取的代码实现了与通过import * as company from './another-file'.

这种方法更广泛地使用，因为它更简洁和直接。

您从中导入的模块可能还包含默认导出。

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

如果您从中导入的模块具有默认导出，您可以通过删除其名称周围的大括号或在命名空间上访问它来导入它
myNamespace.default。

另一个文件.ts
// 👇️ default export
export default function sum(a: number, b: number) {
  return a + b;
}

以下是您将如何导入和使用默认导出。

索引.ts
import * as company from './another-file';

console.log(company.default(15, 15)); // 👉️ 30

请注意，默认导出是一个名为 的函数sum，但我们像
.default使用命名空间导入一样访问它。

更直观的方法是直接导入你需要的东西。

另一个文件.ts
// 👇️ All named exports
export function getEmployee() {
  return { id: 1, salary: 100 };
}

export type Employee = {
  id: number;
  salary: number;
};

export interface Person {
  name: string;
}

export function getPerson() {
  return { name: 'James' };
}

// 👇️ default export
export default function sum(a: number, b: number) {
  return a + b;

这是导入所需成员的方法。

索引.ts
import sum, { getEmployee, Employee, Person, getPerson } from './another-file';

const emp: Employee = getEmployee();
console.log(emp); // 👉️ {id: 1, salary: 100}

const person: Person = getPerson();
console.log(person); // 👉️ {name: 'James'}

console.log(sum(15, 15)); // 👉️ 30

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

您也不必考虑使用默认导出或命名导出导出哪些成员。

–

发表评论