Typescript导出与默认导出

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

此外，我在官方打字稿文档中找不到任何默认export关键字的痕迹。

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.

231211 次浏览
小开
最佳答案

默认导出(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导入所有导出的东西:

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

用哪一种?

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

它还可以很好地使用桶的文件(使用名称空间导出的文件- __abc0 -导出其他文件)。这个答案的“example”部分显示了一个例子。

注意，即使只有一个导出，我对使用命名导出的意见也与__abc1相反-请参阅“Red Flags”部分。我相信这个建议只适用于创建供其他人使用的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
小开

下面是一个简单的对象导出示例。

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

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

那就是:而不是

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

和将要导入的模块中简单的import Foo from './foo';，都应该使用

export class Foo {
// ...
}

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

这样做的原因是类重构的困难，以及为导出增加的工作。Basarat的原始帖子位于避免导出默认值

小开

叫出口

在TS中，可以使用export关键字导出。然后可以通过import {name} from "./mydir";导入它。这被称为叫出口。一个文件可以导出名为exports的多个。此外，导入的名称必须与导出的名称相匹配。例如:

// foo.js file
export class foo{}
export class bar{}


// main.js file in same dir
import {foo, bar} from "./foo";

以下替代语法也是有效的:

// foo.js file
function foo() {};
function bar() {};
export {foo, bar};


// main.js file in same dir
import {foo, bar} from './foo'

默认的出口

我们也可以使用默认的出口。每个文件只能导出一个默认值。导入默认导出时，在import语句中省略方括号。还可以为导入选择自己的名称。

// foo.js file
export default class foo{}


// main.js file in same directory
import abc from "./foo";

只是JavaScript

模块及其相关关键字(如import、export和export default)是JavaScript结构，而不是typescript。但是typescript添加了接口和类型别名的导出和导入功能。


提交答案