TypeScript：模块的默认导入和默认导出

在本文中，我们将介绍TypeScript中的模块默认导入和默认导出的用法和示例。模块是将相关代码组织在一起的方式，以便于复用和维护。TypeScript提供了对模块的支持，可以使用import和export关键字来导入和导出模块中的成员。

阅读更多：TypeScript 教程

默认导入和默认导出

在TypeScript中，每个模块可以有一个默认导出（default export）和多个命名导出（named exports）。默认导出可以是任何值，而命名导出指定了导出的成员名称。

要导出一个模块的默认成员，可以使用export default语法。例如，假设我们有一个名为”example.ts”的模块，我们可以导出一个默认的Hello函数：

// example.ts

export default function Hello(name: string) {
  console.log("Hello, " + name);
}

可以在另一个模块中导入默认导出的成员，而无需使用大括号：

// main.ts

import Hello from "./example";

Hello("World"); // 输出：Hello, World

这里的import Hello from "./example"语句将默认导出的Hello函数导入到main.ts中，并使用它来打印”Hello, World”。

默认导入和命名导入的区别

默认导入和命名导入之间有一些重要的区别。默认导入可以使用任何变量名进行导入，如果不指定变量名，默认导入的成员将被赋值给一个没有名字的变量。而命名导入必须使用成员的确切名称进行导入。

// example.ts

export function foo() {
  console.log("foo");
}

export function bar() {
  console.log("bar");
}

// main.ts

import { foo } from "./example";

foo(); // 输出：foo
bar(); // 错误，bar未定义

在上面的例子中，我们使用命名导出导出了两个函数foo和bar。在main.ts中，只有foo被命名导入，所以我们只能在该文件中调用foo函数。对于bar函数的调用将会导致错误，因为我们没有导入它。

另一方面，如果我们使用默认导出来导出函数，可以使用任意变量名导入：

// example.ts

export default function Hello(name: string) {
  console.log("Hello, " + name);
}

// main.ts

import Greet from "./example";

Greet("World"); // 输出：Hello, World

在这个例子中，我们使用默认导出导出了Hello函数。在main.ts中，我们使用了名为Greet的变量来导入默认函数，并调用它。

导入和导出模块

除了导入和导出默认成员之外，我们还可以同时导入和导出多个成员。使用逗号分隔不同的成员名称，可以在同一行上导入或导出多个成员。

// example.ts

export default function Hello(name: string) {
  console.log("Hello, " + name);
}

export function foo() {
  console.log("foo");
}

export function bar() {
  console.log("bar");
}

// main.ts

import Greet, { foo, bar } from "./example";

Greet("World"); // 输出：Hello, World
foo(); // 输出：foo
bar(); // 输出：bar

在上面的例子中，我们将默认导出的Hello函数和命名导出的foo、bar函数同时导入到main.ts中，并分别调用它们。

默认导出和命名导出的同时使用

在某些情况下，我们可能需要同时使用默认导出和命名导出。可以使用export default语法来导出默认成员，并使用export语法来导出命名成员。

// example.ts

export default function Hello(name: string) {
  console.log("Hello, " + name);
}

export function foo() {
  console.log("foo");
}

export function bar() {
  console.log("bar");
}

// main.ts

import Greet, { foo, bar } from "./example";

Greet("World"); // 输出：Hello, World
foo(); // 输出：foo
bar(); // 输出：bar

在这个例子中，我们同时使用了默认导出和命名导出。我们将默认导出的Hello函数和命名导出的foo、bar函数同时导入到main.ts中，并分别调用它们。

总结

本文介绍了在TypeScript中使用import和export语法进行模块的默认导入和默认导出的使用方法。我们了解了默认导入和命名导入之间的区别，以及如何同时使用默认导出和命名导出。通过合理使用这些功能，我们可以更好地组织和管理我们的代码，并提高代码的复用性和可维护性。

在使用TypeScript开发项目时，我们应充分利用模块的默认导入和默认导出功能，将相关的代码组织到模块中，并正确导入和导出需要使用的成员。这将使我们的代码更加清晰和可读，并提高项目的开发效率。

希望本文对您理解TypeScript中的模块默认导入和默认导出有所帮助！