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
Foo
infoo.ts
it 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 cursor location
import {/*here*/} from "./foo";
Bonus points: Better commonJs experience
Also its makes for a horrible experience for commonjs users who have to const {default} = require('module/foo');
instead of const {foo} = require('module/foo')