När ska jag använda `export default` i JavaScript/TypeScript?

Om vi anger en standardexport:

export class Foo {}
export default Foo;

då kan vi utelämna klammerparenteser vid import (som noterat i detta svar):

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

Det är okej, men finns det någon annan än stilistisk anledning att föredra den ena framför den andra i särskilda fall? Till exempel, finns det någon konvention, eller är den ena inkompatibel med vissa verktyg, eller har den ena en annan betydelse?

(Baserat på denna diskussion och andra, är min förståelse att export default kan ha uppkommit som ett sätt att hantera exporten av ett enskilt, primärt objekt (som $), vilket nu hanteras av import * as foo from "foo". Dessutom verkar det som att standardimportsyntaksen inte tvingar konsekvent namngivning (import fooAlias from "foo"), medan standardimporten import { fooAlias } from "foo" skulle vara ett kompilatorfel om inte aliaset var explicit (Foo as fooAlias). Förutom det har jag inte kunnat hitta mycket information om när jag borde använda den ena över den andra.)

Svar #1

Det finns inget rätt eller fel här. Jag föredrar att exportera en sak så att standard fungerar för mig mesta delen av tiden. Du kan också använda båda två.

Jag tenderar att inte använda default när jag tar ett mer rent funktionellt tillvägagångssätt eller skriver en uppsättning statiska hjälpfunktioner.

Så när min modul egentligen bara är en klass, gillar jag att använda default. Observera att jag fortfarande kan exportera andra saker.

export default class Foo {
}

// någon hjälpfunktion modul

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

Svar #2

att exportera som standard kan låta dig byta namn på filen vid import så...

foo.js

export default class Foo{
  constructor(){
  }
}

kan vara import Bar from './foo'; i en annan fil, detta kan vara användbart om du använder ett bibliotek och redan har en klass Foo definierad.

Du kan också exportera en standard och en icke-standard så att: import Foo, { someVariable, someMethod } from './foo';