打字稿导出与默认导出

Question

export 和 default export 之间的打字稿有什么区别。在所有教程中，我看到人们 export 他们的类，如果我在导出前不添加 default 关键字，我将无法编译我的代码。

此外，我在官方 打字稿文档 中找不到任何默认导出关键字的痕迹。

 export class MyClass {

  collection = [1,2,3];

}

不编译。但：

 export default class MyClass {

  collection = [1,2,3];

}

做。

错误是： error TS1192: Module '"src/app/MyClass"' has no default export.

原文由 fos.alex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

默认导出（ export default ）

 // MyClass.ts -- using default export
export default class MyClass { /* ... */ }

主要区别在于每个文件只能有一个默认导出，并且您可以像这样导入它：

 import MyClass from "./MyClass";

你可以给它起任何你喜欢的名字。例如，这很好用：

 import MyClassAlias from "./MyClass";

命名导出（ export ）

 // MyClass.ts -- using named exports
export class MyClass { /* ... */ }
export class MyOtherClass { /* ... */ }

使用命名导出时，每个文件可以有多个导出，并且需要导入用大括号括起来的导出：

 import { MyClass } from "./MyClass";

注意：添加大括号将修复您在问题中描述的错误，并且大括号中指定的名称需要与导出的名称匹配。

或者说您的文件导出 了多个 类，那么您可以像这样导入两个类：

 import { MyClass, MyOtherClass } from "./MyClass";
// use MyClass and MyOtherClass

或者，您可以在此文件中为它们中的任何一个指定不同的名称：

 import { MyClass, MyOtherClass as MyOtherClassAlias } from "./MyClass";
// use MyClass and MyOtherClassAlias

或者您可以使用 * as 导入所有导出的内容：

 import * as MyClasses from "./MyClass";
// use MyClasses.MyClass and MyClasses.MyOtherClass here

使用哪个？

在 ES6 中，默认导出是简洁的，因为 它们的用例更常见；但是，当我在 TypeScript 中处理项目内部的代码时，我几乎总是更喜欢使用命名导出而不是默认导出，因为它非常适合代码重构。例如，如果您默认导出一个类并重命名该类，它只会重命名该文件中的类，而不会重命名其他文件中的任何其他引用。使用命名导出，它将重命名该类以及所有其他文件中对该类的所有引用。

它还可以很好地处理 桶文件（使用命名空间导出的文件 export * ——导出其他文件）。 此答案 的“示例”部分显示了一个示例。

请注意，即使只有一个导出，我对使用命名导出的看法也违反了 TypeScript 手册——请参阅“危险信号”部分。我相信此建议仅适用于您创建供其他人使用的 API 并且代码不在您的项目内部的情况。当我设计供人们使用的 API 时，我将使用默认导出，以便人们可以执行 import myLibraryDefaultExport from "my-library-name"; 。如果你不同意我这样做，我很想听听你的推理。

也就是说，找到你喜欢的！您可以同时使用一个、另一个或两者。

附加积分

默认导出实际上是一个名为 default 的命名导出，因此如果文件具有默认导出，那么您也可以通过以下方式导入：

 import { default as MyClass } from "./MyClass";

并注意这些 其他导入方式 存在：

 import MyDefaultExportedClass, { Class1, Class2 } from "./SomeFile";
import MyDefaultExportedClass, * as Classes from "./SomeFile";
import "./SomeFile"; // runs SomeFile.js without importing any exports

原文由 David Sherret 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

命名导出

在 TS 中，您可以使用 export 关键字导出。然后可以通过 import {name} from "./mydir"; 导入。这称为 命名导出。一个文件可以导出 多个 命名导出。此外，进口的名称必须与出口相匹配。例如：

 // foo.js file
export class foo{}
export class bar{}

// main.js file in same dir
import {foo, bar} from "./foo";

以下替代语法也是有效的：

 // foo.js file
function foo() {};
function bar() {};
export {foo, bar};

// main.js file in same dir
import {foo, bar} from './foo'

默认导出

我们也可以使用 默认导出。每个文件只能有 一个 默认导出。导入默认导出时，我们省略了导入语句中的方括号。我们也可以为我们的进口选择我们自己的名字。

 // foo.js file
export default class foo{}

// main.js file in same directory
import abc from "./foo";

这只是 JavaScript

模块及其相关关键字如 import 、 export 和 export default 是 JavaScript 结构，而不是打字稿。然而，打字稿添加了接口和类型别名的导出和导入。

原文由 Willem van der Veen 发布，翻译遵循 CC BY-SA 4.0 许可协议