Typescript export const foo vs export default { foo }

Question

Are the three export options exactly equivalent?

// foo.ts
export const foo = () => {}

// foo.ts
const foo = () => {}
export default { foo }

// foo.ts
const foo = () => {}
export { foo }

Disclaimer: I know that import { foo } from './foo' will work just the same in all scenarios but are there any nuances?

Particularly interested in any nuances that might occur when having a mixed ts and js codebase.

Using tsconfig "module": "CommonJS", nodejs v14 and typescript 4.2.4

I take it you're using a bundler of some kind? Since that isn't CommonJS syntax. — T.J. Crowder
– T.J. Crowder, Commented Aug 2, 2021 at 17:54
I can't speak to TypeScript's handling of this stuff, so I won't post an answer. But beware that in the standard module syntax defined by the JavaScript specification, the second of those three does a very different thing to the other two (the first and third are exactly equivalent). It may be that TypeScript lets you import all three the same way, but if so that's a TypeScript thing. In standard ESM, your first and third blocks create a named export you'd import as import { foo } from "./mod.js"; Your ... — T.J. Crowder
– T.J. Crowder, Commented Aug 2, 2021 at 17:59
...second block creates a default export of an object with a foo property (which is very different from a named export), which you cannot import using named import syntax. Instead, you'd import the default (import obj from "./foo.js";) and either destructure foo from it (const { foo } = obj;) or just use it as obj.foo. That one is not constant; code in modules using it can change the value of foo via simple assignment. The single exported object is shared by all modules. — T.J. Crowder
– T.J. Crowder, Commented Aug 2, 2021 at 18:00

score 3 · Accepted Answer · 2021-08-03 00:44:17Z

3

The short answer is no they're not the same, they have different syntax, but let's be serious.

export const foo = () => {}

...

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.foo = void 0;
var foo = function () { };
exports.foo = foo;

Is what that compiles to using commonjs and es5 as target.

const foo = () => {}
export default { foo }

...

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var foo = function () { };
exports.default = { foo: foo };

Is what that compiles to.

const foo = () => {}
export { foo }

...

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.foo = void 0;
var foo = function () { };
exports.foo = foo;

Is what that compiles to.

Along with that it should also be noted that using:

export { foo }

Can only be imported using:

import {foo} from './foo'

While using:

export default { foo }

Can only be imported using:

import whatever from './foo'

// use whatever.foo

edited Aug 3, 2021 at 0:44

answered Aug 3, 2021 at 0:32

user16435030

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

2 Comments

Bergi Over a year ago

import {foo} from './foo' should not work with a default export.

T.J. Crowder Over a year ago

Ah, so I shouldn't have believed the part of the question where the OP said TypeScript allowed using named import syntax with the default export of the object. You should explain what whatever ends up being in that case, since it's different.

Collectives™ on Stack Overflow

Typescript export const foo vs export default { foo }

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related