导出(导出默认)

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

或者你可以使用* as导入所有导出的东西:

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

用哪一种?

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.

它还可以很好地处理桶状文件(使用名称空间exports-export *来导出其他文件的文件)。这个答案的“例子”部分给出了一个例子。

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.

也就是说，找到你更喜欢的!你可以同时使用其中一种，另一种，或者两种。

附加分

默认导出实际上是一个名为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

导出(导出默认)

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

或者你可以使用* as导入所有导出的东西:

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

用哪一种?

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.

它还可以很好地处理桶状文件(使用名称空间exports-export *来导出其他文件的文件)。这个答案的“例子”部分给出了一个例子。

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.

也就是说，找到你更喜欢的!你可以同时使用其中一种，另一种，或者两种。

附加分

默认导出实际上是一个名为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

叫出口

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

// 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添加了接口和类型别名的导出和导入功能。

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

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标签附加到类声明中。导入的类应该在模块的import命令中列出。

那就是:而不是

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

以及简单地从'./ Foo '导入Foo;在将要导入的模块中，应该使用

export class Foo {
    // ...
}

并从`中导入{Foo}。/foo'在进口商。

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