export default can lead to problems
Let's go with an example. Consider you have a file foo.ts with the following contents:
class Foo {
}
export default Foo;
You would import it (in bar.ts) using ES6 syntax as follows:
import Foo from "./foo";
There are a few maintainability concerns here:
- If you refactor
Fooinfoo.tsit will not rename it inbar.ts - If you end up needing to export more stuff from
foo.ts(which is what many of your files will have) then you have to juggle the import syntax.
For this reason I recommend simple exports + destructured import. E.g. foo.ts:
export class Foo {
}
And then:
import {Foo} from "./foo";
Bonus points: You even get autocomplete at this
import {/*here*/} from "./foo";cursor location. Gives your developers a bit of wrist relief.Bonus points: Better commonJs experience. With
defaultthere is horrible experience for commonjs users who have toconst {default} = require('module/foo');instead ofconst {Foo} = require('module/foo')Bonus points: You don't get typos like one dev doing
import Foo from "./foo";and another doingimport foo from "./foo";Bonus points: Auto import quickfix works better. You use
Fooand auto import will write downimport { Foo } from "./foo";caus its a well defined name exported from a module.Bonus points: Reexporting is unnecessarily hard. Reexporting is common for the root
indexfile in npm packages e.g.import Foo from "./foo"; export { Foo }(with default) vs.export * from "./foo"(with named exports).