Typescript导出与默认导出

Question

export class MyClass {

  collection = [1,2,3];

}

export default class MyClass {

  collection = [1,2,3];

}

做。

错误是:错误TS1192:模块“src/app/myclass”没有默认导出。

Answer 1

默认导出(导出默认值)

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

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

import MyClass from "./MyClass";

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

import MyClassAlias from "./MyClass";

// 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

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

用哪一个？

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

它还能很好地处理barrel文件（使用命名空间导出-export*-导出其他文件的文件）。这方面的一个例子在本答案的“示例”部分中显示。

请注意，即使只有一个导出，我对使用命名导出的看法也与TypeScript手册相反--请参见“红旗”一节。我相信这个建议只适用于当您正在创建一个供其他人使用的API，并且代码不是您的项目内部的时候。当我设计供人们使用的API时，我将使用默认导出，以便人们可以从“my-library-name”导入myLibraryDefaultExport；。如果你不同意我这样做，我很想听听你的理由。

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

附加要点

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