typescript typescript导出interface 打字稿导出与默认导出




typescript导出interface (3)

Typescript在exportdefault 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.


以下是简单对象导出的示例。

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) );

我试图解决同样的问题,但发现TypeScript Deep Dive名声的Basarat Ali Syed提出了一个有趣的建议,即我们应该避免类的通用export default声明,而是将export标记附加到类声明中。 导入的类应该被列在模块的import命令中。

那是:而不是

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

import Foo from './foo';的简单import Foo from './foo'; 在要导入的模块中,应该使用

export class Foo {
    // ...
}

import {Foo} from './foo'

原因在于重构类的困难,以及增加的出口工作。 Basarat的原始文章在export default可能导致问题


默认导出( 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导出的所有内容, * 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






ecmascript-6