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

问题描述

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

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 文档中找不到任何关于默认导出关键字的痕迹.

Also, I couldn't find any trace of the default export keyword in the official typescript documentation.

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.

推荐答案

默认导出(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";

命名导出(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 导出的所有内容:

Or you could import everything that's exported by using * 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 barrel files (files that use namespace exports—export *—to export other files). An example of this is shown in the "example" section of this answer.

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

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屋！