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

В чем разница в Typescript между export и default export. Во всех учебниках я вижу людей export своих классов, и я не могу скомпилировать свой код, если я не добавляю ключевое слово default перед экспортом.

Кроме того, я не смог найти ни одного ключевого слова экспорта по умолчанию в официальной typescript документации.

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.

Ответ 1

Экспорт по умолчанию (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 * -other). Пример этого показан в разделе "пример" этого ответа.

Обратите внимание, что мое мнение об использовании именованного экспорта, даже если есть только один экспорт, противоречит 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

Ответ 2

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

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