web-dev-qa-db-ger.com

Typoscript-Export vs. Standardexport

Was ist der Unterschied in TypeScript zwischen export und default export. In allen Tutorials sehe ich Menschen, die exporting ihre Klassen machen, und ich kann meinen Code nicht kompilieren, wenn ich das default-Schlüsselwort nicht vor dem Export hinzufügen.

Ich konnte auch keine Spur des Standard-Exportschlüsselworts in der offiziellen TypeScript-Dokumentation finden.

export class MyClass {

  collection = [1,2,3];

}

Kompiliert nicht Aber:

export default class MyClass {

  collection = [1,2,3];

}

Tut.

Der Fehler ist: error TS1192: Module '"src/app/MyClass"' has no default export.

182
fos.alex

Standardexport (export default)

// MyClass.ts -- using default export
export default class MyClass { /* ... */ }

Der Hauptunterschied besteht darin, dass Sie nur einen Standardexport pro Datei haben können, den Sie wie folgt importieren:

import MyClass from "./MyClass";

Sie können ihm einen beliebigen Namen geben. Das funktioniert zum Beispiel gut:

import MyClassAlias from "./MyClass";

Benannter Export (export)

// MyClass.ts -- using named exports
export class MyClass { /* ... */ }
export class MyOtherClass { /* ... */ }

Wenn Sie einen benannten Export verwenden, können Sie mehrere Exporte pro Datei ausführen, und Sie müssen die Exporte in geschweifte Klammern importieren:

import { MyClass } from "./MyClass";

Hinweis: Durch das Hinzufügen der geschweiften Klammern wird der in Ihrer Frage beschriebene Fehler behoben, und der in den geschweiften Klammern angegebene Name muss mit dem Namen des Exports übereinstimmen.

Oder sagen Sie, Ihre Datei exportierte multiple-Klassen. Dann könnten Sie beide importieren:

import { MyClass, MyOtherClass } from "./MyClass";
// use MyClass and MyOtherClass

Oder Sie können jedem von ihnen einen anderen Namen in dieser Datei geben:

import { MyClass, MyOtherClass as MyOtherClassAlias } from "./MyClass";
// use MyClass and MyOtherClassAlias

Oder importieren Sie alles, was exportiert wird, indem Sie * as verwenden:

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

Was soll ich verwenden?

In ES6 sind Standardexporte knapp, weil ihr Anwendungsfall häufiger ist ; Wenn ich jedoch in TypeScript an internem Code arbeite, ziehe ich es fast immer vor, benannte Exporte anstelle von Standardexporten zu verwenden, da er sehr gut mit Code-Refactoring funktioniert. Wenn Sie beispielsweise standardmäßig eine Klasse exportieren und diese Klasse umbenennen, wird nur die Klasse in dieser Datei und nicht die anderen Referenzen in anderen Dateien umbenannt. Bei benannten Exporten werden die Klasse und alle Referenzen auf diese Klasse in allen anderen Dateien umbenannt.

Es kann auch sehr gut mit barrel files abgespielt werden (Dateien, die Namespace-Exporte verwenden - export * -, um andere Dateien zu exportieren). Ein Beispiel dafür wird im Abschnitt "Beispiel" von dieser Antwort gezeigt.

Beachten Sie, dass meine Meinung zu benannten Exporten, auch wenn es nur einen Export gibt, im Gegensatz zum TypeScript Handbook - im Abschnitt "Rote Flags" steht. Ich glaube, dass diese Empfehlung nur gilt, wenn Sie eine API erstellen, die von anderen Personen verwendet werden kann und der Code nicht intern in Ihrem Projekt ist. Wenn ich eine API für die Benutzer entwerfe, verwende ich einen Standardexport, damit die Benutzer import myLibraryDefaultExport from "my-library-name"; ausführen können. Wenn Sie mir nicht zustimmen, würde ich gerne Ihre Argumentation hören.

Das heißt, finden Sie, was Sie bevorzugen! Sie können eine, die andere oder beide gleichzeitig verwenden.

Zusätzliche Punkte

Ein Standardexport ist eigentlich ein benannter Export mit dem Namen default. Wenn die Datei einen Standardexport hat, können Sie auch Folgendes importieren:

import { default as MyClass } from "./MyClass";

Und beachte, dass diese andere Wege Import existieren:

import MyDefaultExportedClass, { Class1, Class2 } from "./SomeFile";
import MyDefaultExportedClass, * as Classes from "./SomeFile";
import "./SomeFile"; // runs SomeFile.js without importing any exports
355
David Sherret

Ich habe versucht, das gleiche Problem zu lösen, fand aber einen interessanten Rat von Basarat ALi Syed , von TypeScript Deep Dive, dass wir die generische export default-Deklaration für eine Klasse vermeiden und stattdessen die export Tag zur Klassendeklaration. Die importierte Klasse sollte stattdessen im Befehl import des Moduls aufgeführt sein. 

Das heißt: statt 

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

und den einfachen import Foo from './foo'; in dem zu importierenden Modul sollte man verwenden 

export class Foo {
    // ...
}

und import {Foo} from './foo' im Importer.

Der Grund dafür sind Schwierigkeiten beim Refactoring von Klassen und die zusätzliche Arbeit für den Export. Der ursprüngliche Beitrag von Basarat ist in export default kann zu Problemen führen

2

Hier ein Beispiel mit einfachem Objektexport.

var MyScreen = {

    /* ... */

    width : function (percent){

        return window.innerWidth / 100 * percent

    }

    height : function (percent){

        return window.innerHeight / 100 * percent

    }


};

export default MyScreen

In der Hauptdatei (Verwenden Sie diese Option, wenn Sie keine neue Instanz erstellen möchten und müssen) und diese nicht global ist, importieren Sie dies nur, wenn sie benötigt wird: 

import MyScreen from "./module/screen";
console.log( MyScreen.width(100) );
0
Nikola Lukic