打字稿导出与默认导出

3 回答

• 0

  Default Export (export default)

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

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

  import MyClass from "./MyClass";
  

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

  import MyClassAlias from "./MyClass";
  

  Named Export (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
  

  Which to use?

  在ES6中，默认导出是简洁的，因为their use case is more common;但是，当我在TypeScript中处理项目内部代码时，我更喜欢使用命名导出而不是默认导出，因为它在代码重构方面非常有效 . 例如，如果您默认导出一个类并重命名该类，它将只重命名该文件中的类，而不重命名其他文件中的任何其他引用 . 使用命名导出，它将重命名该类以及所有其他文件中对该类的所有引用 .

  它也与barrel files（使用命名空间导出的文件-734445_-导出其他文件）非常吻合 . this answer的"example"部分显示了此示例 .

  请注意，即使只有一个导出，我对使用命名导出的看法也与TypeScript Handbook-查看"Red Flags"部分相反 . 我相信此建议仅适用于您为其他人创建API并且代码不在您的项目内部时 . 当我'm designing an API for people to use, I' ll使用默认导出时，人们可以做 import myLibraryDefaultExport from "my-library-name"; . 如果你不同意我做这件事，我很想听听你的理由 .

  那说，找到你喜欢的！您可以同时使用其中一个，或两个 .

  Additional Points

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

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

  并注意这些other ways导入存在：

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

  回复于 2024-04-29T16:18:29+08:00
• 330

  这是简单对象导出的示例 .

  var MyScreen = {
  
      /* ... */
  
      width : function (percent){
  
          return window.innerWidth / 100 * percent
  
      }
  
      height : function (percent){
  
          return window.innerHeight / 100 * percent
  
      }
  
  
  };
  
  export default MyScreen
  

  在主文件中（当您不想要并且不需要创建新实例时使用）并且它不是全局的，您将仅在需要时导入它：

  import MyScreen from "./module/screen";
  console.log( MyScreen.width(100) );
  

  回复于 2024-04-29T16:18:29+08:00
• 0

  我试图解决同样的问题，但是Basarat Ali Syed找到了一个有趣的建议，我们应该避免类的通用 export default 声明，而是将 export 标记附加到类声明中 . 应该在模块的 import 命令中列出导入的类 .

  那就是：而不是

  class Foo {
      // ...
  }
  export default Foo;
  

  并且将导入的模块中的简单 import Foo from './foo'; 应该使用

  export class Foo {
      // ...
  }
  

  和 import {Foo} from './foo' 在进口商 .

  其原因是课程重构困难，以及增加出口工作 . Basarat的原始帖子位于export default can lead to problems

  回复于 2024-04-29T16:18:29+08:00