Eksport maszynopisu a eksport domyślny

Question

Eksport maszynopisu a eksport domyślny

Jaka jest różnica w maszynopisie pomiędzy export i default export. We wszystkich tutorialach widzę ludzi exportw swoich klasach i nie mogę skompilować kodu, jeśli nie dodam słowa kluczowego default przed eksportem.

Nie mogłem również znaleźć żadnego śladu domyślnego słowa kluczowego export w oficjalnej dokumentacji maszynopisu.

export class MyClass {

  collection = [1,2,3];

}

Nie kompiluje się. Ale:

export default class MyClass {

  collection = [1,2,3];

}

Tak.

Błąd to: error TS1192: Module '"src/app/MyClass"' has no default export.

162

ecmascript-6 typescript

Author: fos.alex, 2015-10-23

Source

3 answers

Oto przykład z prostym eksportowaniem obiektów.

var MyScreen = {

    /* ... */

    width : function (percent){

        return window.innerWidth / 100 * percent

    }

    height : function (percent){

        return window.innerHeight / 100 * percent

    }


};

export default MyScreen

W pliku głównym (Używaj, gdy nie chcesz i nie musisz tworzyć nowej instancji) i nie jest to globalne zaimportujesz to tylko wtedy, gdy będzie to potrzebne:

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

0

Author: Nikola Lukic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-14 12:47:25

Próbowałem rozwiązać ten sam problem, ale znalazłem interesującą radę Basarat Ali Syed , z TypeScript Deep Dive fame, że powinniśmy unikać ogólnej deklaracji export default dla klasy, a zamiast tego dodawać znacznik export do deklaracji klasy. Zaimportowana klasa powinna być wymieniona w Komendzie import modułu.

Czyli: zamiast

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

I prosty import Foo from './foo'; w module, który będzie importować, należy użyć

export class Foo {
    // ...
}

I import {Foo} from './foo' w imporcie.

Powodem tego są trudności w refaktoryzacji klas i dodawanie pracy do eksportu. Original post by Basarat is in export default może prowadzić do problemów

0

Author: Hilton Fernandes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-14 00:27:35

score 317 · Accepted Answer

Domyślny Eksport (export default)

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

Główna różnica polega na tym, że możesz mieć tylko jeden domyślny eksport na plik i importujesz go w następujący sposób:

import MyClass from "./MyClass";

Możesz nadać mu dowolne imię. Na przykład działa to dobrze:

import MyClassAlias from "./MyClass";

Nazwa Eksportu (export)

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

Gdy używasz nazwanego eksportu, możesz mieć wiele eksportów na plik i musisz zaimportować eksport otoczony klamrami:

import { MyClass } from "./MyClass";

Uwaga: dodawanie szelek naprawi błąd, który opisujesz w swoim pytaniu, a nazwa określona w nawiasach musi pasować do nazwy eksportu.

Lub powiedzmy, że Twój plik wyeksportował wiele klas , wtedy możesz zaimportować obie w ten sposób:

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

Albo możesz nadać któremuś z nich inną nazwę w tym pliku:

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

Lub możesz zaimportować wszystko, co jest eksportowane za pomocą * as:

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

Którego użyć?

W ES6 domyślnym eksportem są zwięzłe, ponieważ ich przypadek użycia jest bardziej powszechny ; jednak, gdy pracuję nad kodem wewnętrznym do projektu w maszynopisie, wolę używać nazwanych eksportów zamiast domyślnych eksportów prawie cały czas, ponieważ działa to bardzo dobrze z refaktoryzacją kodu. Na przykład, jeśli domyślnie wyeksportujesz klasę i zmienisz jej nazwę, zmieni ona tylko nazwę klasy w tym pliku, a nie jakiekolwiek inne odniesienia w innych plikach. Z nazwanym eksportem zmieni nazwę klasy i wszystkie odniesienia do niej Klasa we wszystkich innych plikach.

Gra również bardzo ładnie z beczkowymi plikami (pliki, które używają przestrzeni nazw exports - export * - do eksportowania innych plików). Przykład tego jest pokazany w sekcji" przykład " w tej odpowiedzi .

Zauważ, że moja opinia o używaniu nazwanego eksportu nawet wtedy, gdy istnieje tylko jeden eksport jest sprzeczna z podręcznikiem maszynopisu -patrz sekcja "czerwone flagi". Uważam, że to zalecenie ma zastosowanie tylko wtedy, gdy tworzysz API dla innych osób do użycia, a kod nie jest wewnętrzny do twojego projektu. Kiedy projektuję API dla ludzi, użyję domyślnego eksportu, aby ludzie mogli to zrobić import myLibraryDefaultExport from "my-library-name";. Jeśli nie zgadzasz się ze mną w tej sprawie, chętnie wysłucham twojego rozumowania.

To powiedziane, znajdź to, co wolisz! Możesz użyć jednego, drugiego lub obu jednocześnie.

Dodatkowe Punkty

Domyślny eksport jest w rzeczywistości nazwanym eksportem o nazwie default, więc jeśli plik ma domyślny eksport następnie możesz również zaimportować wykonując:

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

I zwróć uwagę na te inne sposoby aby zaimportować istnieją:

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