When should I use `export default`in JavaScript / TypeScript?

Question

If we specify a default export:

export class Foo {}
export default Foo;

then we can omit curly braces during import (as noted in this answer):

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

That's fine, but is there any non-stylistic reason to prefer one over the other in particular cases? For example, is there some convention, or is one incompatible with certain tools, or does one have a different meaning?

(Based on this discussion and others, my understanding is that export default might have arisen as a way of handling the export of a single, primary object (like $), which is now handled by import * as foo from "foo". Also, it seems the default import syntax does not enforce consistent naming (import fooAlias from "foo"), while the standard import import { fooAlias } from "foo" would be a compilation error unless the alias was explicit (Foo as fooAlias). Apart from that, I haven't been able to find much information on when I should use one over the other.)

Yes, it's supposed to be used when the module defines only a single object (or value in general). Notice that import * as $ from "jquery"; would not work - you want $ to be a function not a namespace object. — Bergi
– Bergi, Commented Nov 25, 2015 at 19:40
@Bergi right, but would omitting the default export and importing via import { $ } from "jquery" be any different? When would I use one over the other? Is export default ever required at all? — mk.
– mk., Commented Nov 25, 2015 at 20:40
A default export is usually the most important value, i.e. the one used more frequently. The default export is just another named export with the special name default, so import { default as $ } from 'jquery' is equivalent to import $ from 'jquery'. — Paolo Moretti
– Paolo Moretti, Commented Nov 25, 2015 at 20:52
@mk.: Using a named export is just more verbose (import { jQuery as $ } …), and you need to remember the name of the export - and repeat it, as it will be the same everywhere. No, default exports are nowhere required, they're just a convienience. — Bergi
– Bergi, Commented Nov 25, 2015 at 21:26

pbo · Accepted Answer · 2016-10-15 16:23:22Z

2

There's no right or wrong here. I prefer to export one thing so default works for me most of the time. You can also use both too.

I tend to not use default when taking a more pure functional approach or writing a set of static util functions.

So when my module is really just a class, I like to use default. Notice I can still export other things.

export default class Foo {
}

// some util module

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

answered Oct 15, 2016 at 16:23

pbo

5374 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

glued · Accepted Answer · 2015-11-29 03:27:35Z

1

exporting default can allow you to rename the file on import so...

foo.js

export default class Foo{
  constructor(){
  }
}

can be import Bar from './foo'; in another file, this could be useful if you're using a library and already have a class Foo defined.

You can also export a default and a non default such that: import Foo, { someVariable, someMethod } from './foo';

answered Nov 29, 2015 at 3:27

glued

2,6491 gold badge27 silver badges42 bronze badges

1 Comment

mk. Over a year ago

This would be the sort of answer I'm looking for ("it allows us to alias"), but aliasing is also available without default exports: just write import { Foo as fooAlias }.... It's a bit longer, but that's ultimately just a stylistic difference...

Collectives™ on Stack Overflow

When should I use `export default`in JavaScript / TypeScript?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related