Kiedy należy używać `export default`in JavaScript/TypeScript?

Question

Gdybyśmy określić domyślny wywóz:

export class Foo {} 
export default Foo; 

wtedy można pominąć nawiasy klamrowe podczas importu (jak wspomniano w this answer):

import { Foo } from "foo"; // becomes: 
import Foo from "foo"; 

to w porządku, ale czy istnieje jakieś non-stylistyczną powód do preferować jeden nad drugim w poszczególnych przypadkach? Na przykład, czy istnieje pewna konwencja, czy jest ona niezgodna z niektórymi narzędziami, czy też ma ona inne znaczenie?

(Na podstawie this discussion i innych, moje rozumienie jest export default mogły powstać jako sposób obchodzenia się z eksportu jednego, pierwotnego obiektu (jak $), który jest obecnie obsługiwany przez import * as foo from "foo". Ponadto, wydaje się, że domyślne Składnia importu nie wymusza spójnego nazewnictwa (import fooAlias from "foo"), podczas gdy standardowy import import { fooAlias } from "foo" byłby błędem kompilacji, chyba że alias byłby wyraźny (Foo as fooAlias) .Odpowiedziałem, że nie byłem w stanie znaleźć wiele informacji na temat kiedy powinienem użyć jednego z drugiej.)

Answer 1

Ustawienie domyślne eksportu umożliwia zmianę nazwy pliku podczas importu, więc ...

foo.js

export default class Foo{ 
    constructor(){ 
    } 
} 

może być import Bar from './foo'; w innym pliku, może to być przydatne, jeśli używasz biblioteki i już mają Foo klasy zdefiniowane.

Można także eksportować domyślny i non domyślne takie, że: import Foo, { someVariable, someMethod } from './foo';

Answer 2

Nie ma rację czy nie tutaj. Wolę wyeksportować jedną rzecz, więc domyślnie działa dla mnie przez większość czasu. Możesz również użyć obu.

Zwykle nie używam default przy bardziej czystym podejściu funkcjonalnym lub przy zapisywaniu zestawu funkcji statycznych.

Kiedy mój moduł jest naprawdę tylko klasą, lubię używać default. Zauważ, że nadal mogę eksportować inne rzeczy.

export default class Foo { 
} 

// niektóre util moduł

export function fooHelper() { 
} 
export function bazHelper() { 
}