Typescript导出与默认导出 [英] Typescript export vs. default export

问题描述

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

What is the difference in Typescript between export and default export. In all the tutorials I see people exporting their classes and I cannot compile my code if I don't add the default keyword before exporting.

另外，在官方的 typescript文档。

export class MyClass {

  collection = [1,2,3];

}

无法编译。但是：

export default class MyClass {

  collection = [1,2,3];

}

错误是：错误TS1192：模块'src / app / MyClass'没有默认导出。

推荐答案

默认导出（导出默认值）

Default Export (export default)

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

主要的区别是每个文件只能有一个默认导出，并像这样导入：

The main difference is that you can only have one default export per file and you import it like so:

import MyClass from "./MyClass";

你可以给任何你喜欢的名字。例如，这可以正常工作：

You can give it any name you like. For example this works fine:

import MyClassAlias from "./MyClass";

命名导出（导出）

Named Export (export)

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

您使用命名导出，您可以为每个文件多个导出，并且您需要导入大括号中包围的导出：

When you use a named export, you can have multiple exports per file and you need to import the exports surrounded in braces:

import {MyClass} from "./MyClass";

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

或者说你的文件导出多个类，然后你可以这样导入：

Or say your file exported multiple classes, then you could import both like so:

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

或者你可以给他们其中一个不同的名字这个文件：

Or you could give either of them a different name in this file:

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中处理项目内部的代码时，我更喜欢使用命名导出，而不是几乎所有的时间都使用默认导出，因为它与代码重构工作非常好。例如，如果您默认导出一个类并重命名该类，那么它只会重命名该文件中的类，而不是其他文件中的任何其他引用。使用命名导出，它将重命名所有其他文件中的类和所有对该类的引用。

In ES6, default exports are concise because their use case is more common; however, when I am working on code internal to a project in TypeScript, I prefer to use named exports instead of default exports almost all the time because it works very well with code refactoring. For example, if you default export a class and rename that class, it will only rename the class in that file and not any of the other references in other files. With named exports it will rename the class and all the references to that class in all the other files.

它还可以非常好地重新导出文件导出 - export * - 其他文件）。 此答案的示例部分显示了一个示例。

It also plays very nicely with re-export files (files that star export—export *—other files). An example of this is shown in the "example" section of this answer.

请注意，即使只有一个导出，我对使用命名导出的意见与 TypeScript手册 - 请参阅红旗部分。我认为这个建议只适用于您为其他人创建API而使用的代码不在项目内部。当我设计一个API供人们使用时，我将使用默认的导出，以便人们可以从my-library-name; 导入myLibraryDefaultExport 。如果你不同意我这样做，我很乐意听到你的推理。

Note that my opinion on using named exports even when there is only one export is contrary to the TypeScript Handbook—see the "Red Flags" section. I believe this recommendation only applies when you are creating an API for other people to use and the code is not internal to your project. When I'm designing an API for people to use, I'll use a default export so people can do import myLibraryDefaultExport from "my-library-name";. If you disagree with me about doing this, I would love to hear your reasoning.

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

That said, find what you prefer! You could use one, the other, or both at the same time.

附加积分

默认导出实际上是名为 default 的命名导出，因此如果该文件具有默认导出，那么您还可以通过执行以下操作导入：

A default export is actually a named export with the name default, so if the file has a default export then you can also import by doing:

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

请记住这些其他方式导入存在： 

And take note these other ways to import exist: 

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

这篇关于Typescript导出与默认导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！