Экспорт Typescript и экспорт по умолчанию

в чем разница в Typescript между export и default export. Во всех учебниках я вижу людей exporting их классы, и я не могу скомпилировать свой код, если я не добавлю 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.

162
ecmascript-6 typescript

3 ответов

Экспорт По Умолчанию (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, я предпочитаю использовать именованный экспорт вместо экспорта по умолчанию почти все время, потому что он очень хорошо работает с рефакторингом кода. Например, если по умолчанию экспортировать класс и переименовать его, он будет переименовывать только класс в этом файле и никаких других ссылок в других файлах. С именованным экспортом он переименует класс и все ссылки на этот класс во всех других файлах.

он также играет очень хорошо с файлы баррель (файлы, использующие экспорт пространства имен -export *-для экспорта других файлов). Пример этого показан в разделе "пример"ответ.

обратите внимание, что мое мнение об использовании именованного экспорта, даже если есть только один экспорт вопреки Руководство По Машинописи-см. раздел "красные флаги". Я считаю, что эта рекомендация применяется только при создании 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
317

вот пример с простым экспортом объектов.

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

Я пытался решить ту же проблему, но нашел интересный совет от Basarat Али Сайед, of TypeScript Глубокое Погружение известность, что мы должны избегать общего export default объявление для класса и вместо этого добавьте export тег к объявлению класса. Вместо этого импортированный класс должен быть указан в модуля.

то есть: вместо 

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

и просто import Foo from './foo'; в модуле, который будет импорт, следует использовать 

export class Foo {
    // ...
}

и import {Foo} from './foo' в импортера.

причина этого-трудности с рефакторингом классов и дополнительная работа для экспорта. Оригинальный пост Basarat находится в export default может привести к проблемам

0