Default Export (export default)

// MyClass.ts -- using default export
export default class MyClass { /* ... */ }

The main difference is that you can only have one default export per file and you import it like so:

import MyClass from "./MyClass";

You can give it any name you like. For example this works fine:

import MyClassAlias from "./MyClass";

Named Export (export)

// MyClass.ts -- using named exports
export class MyClass { /* ... */ }
export class MyOtherClass { /* ... */ }

When you use a named export, you can have multiple exports per file and you need to import the exports surrounded in braces:

import { MyClass } from "./MyClass";

Note: Adding the braces will fix the error you're describing in your question and the name specified in the braces needs to match the name of the export.

Or say your file exported multiple classes, then you could import both like so:

import { MyClass, MyOtherClass } from "./MyClass";
// use MyClass and MyOtherClass

Or you could give either of them a different name in this file:

import { MyClass, MyOtherClass as MyOtherClassAlias } from "./MyClass";
// use MyClass and MyOtherClassAlias

Or you could import everything that's exported by using * as:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass and MyClasses.MyOtherClass here

Which to use?

In ES6, default exports are concise because their use case is more common; however, when I am working on code internal to a project in TypeScript, I prefer to use named exports instead of default exports almost all the time because it works very well with code refactoring. For example, if you default export a class and rename that class, it will only rename the class in that file and not any of the other references in other files. With named exports it will rename the class and all the references to that class in all the other files.

It also plays very nicely with barrel files (files that use namespace exports—export *—to export other files). An example of this is shown in the "example" section of this answer.

Note that my opinion on using named exports even when there is only one export is contrary to the TypeScript Handbook—see the "Red Flags" section. I believe this recommendation only applies when you are creating an API for other people to use and the code is not internal to your project. When I'm designing an API for people to use, I'll use a default export so people can do import myLibraryDefaultExport from "my-library-name";. If you disagree with me about doing this, I would love to hear your reasoning.

That said, find what you prefer! You could use one, the other, or both at the same time.

Additional Points

A default export is actually a named export with the name default, so if the file has a default export then you can also import by doing:

import { default as MyClass } from "./MyClass";

And take note these other ways to import exist: 

import MyDefaultExportedClass, { Class1, Class2 } from "./SomeFile";
import MyDefaultExportedClass, * as Classes from "./SomeFile";
import "./SomeFile"; // runs SomeFile.js without importing any exports
Answer from David Sherret on Stack Overflow
Top answer
1 of 4
699

Default Export (export default)

// MyClass.ts -- using default export
export default class MyClass { /* ... */ }

The main difference is that you can only have one default export per file and you import it like so:

import MyClass from "./MyClass";

You can give it any name you like. For example this works fine:

import MyClassAlias from "./MyClass";

Named Export (export)

// MyClass.ts -- using named exports
export class MyClass { /* ... */ }
export class MyOtherClass { /* ... */ }

When you use a named export, you can have multiple exports per file and you need to import the exports surrounded in braces:

import { MyClass } from "./MyClass";

Note: Adding the braces will fix the error you're describing in your question and the name specified in the braces needs to match the name of the export.

Or say your file exported multiple classes, then you could import both like so:

import { MyClass, MyOtherClass } from "./MyClass";
// use MyClass and MyOtherClass

Or you could give either of them a different name in this file:

import { MyClass, MyOtherClass as MyOtherClassAlias } from "./MyClass";
// use MyClass and MyOtherClassAlias

Or you could import everything that's exported by using * as:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass and MyClasses.MyOtherClass here

Which to use?

In ES6, default exports are concise because their use case is more common; however, when I am working on code internal to a project in TypeScript, I prefer to use named exports instead of default exports almost all the time because it works very well with code refactoring. For example, if you default export a class and rename that class, it will only rename the class in that file and not any of the other references in other files. With named exports it will rename the class and all the references to that class in all the other files.

It also plays very nicely with barrel files (files that use namespace exports—export *—to export other files). An example of this is shown in the "example" section of this answer.

Note that my opinion on using named exports even when there is only one export is contrary to the TypeScript Handbook—see the "Red Flags" section. I believe this recommendation only applies when you are creating an API for other people to use and the code is not internal to your project. When I'm designing an API for people to use, I'll use a default export so people can do import myLibraryDefaultExport from "my-library-name";. If you disagree with me about doing this, I would love to hear your reasoning.

That said, find what you prefer! You could use one, the other, or both at the same time.

Additional Points

A default export is actually a named export with the name default, so if the file has a default export then you can also import by doing:

import { default as MyClass } from "./MyClass";

And take note these other ways to import exist: 

import MyDefaultExportedClass, { Class1, Class2 } from "./SomeFile";
import MyDefaultExportedClass, * as Classes from "./SomeFile";
import "./SomeFile"; // runs SomeFile.js without importing any exports
2 of 4
25

I was trying to solve the same problem, but found an interesting advice by Basarat Ali Syed, of TypeScript Deep Dive fame, that we should avoid the generic export default declaration for a class, and instead append the export tag to the class declaration. The imported class should be instead listed in the import command of the module.

That is: instead of

class Foo {
    // ...
}
export default Foo;

and the simple import Foo from './foo'; in the module that will import, one should use

export class Foo {
    // ...
}

and import {Foo} from './foo' in the importer.

The reason for that is difficulties in the refactoring of classes, and the added work for exportation. The original post by Basarat is in Avoid Export Default

🌐
Amit Merchant
amitmerchant.com › difference-between-export-and-export-default-in-typescript
Difference between Export and Export Default in TypeScript
August 28, 2020 - As you can see, we didn’t have the name of the class over here. Classes and function declarations can be authored directly as default exports. Default export class and function declaration names are optional.
Discussions

Named exports of functions vs default export object with functions inside?
Named exports. It's easier to see what's exported, and the interop with CommonJS is easier. More on reddit.com
🌐 r/node
23
39
November 25, 2021
Clarify the pros and cons and the use cases for named export vs default export.
Challenge Both myself and my team have experienced some confusion around choosing between named exports and default exports. On the one hand, official documentation suggests favoring export default. The TypeScript handbook's page on Modu... More on github.com
🌐 github.com
2
August 26, 2017
export default type
Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this featureThis means we'd like to hear from more people who would be helped by this featureSuggestionAn idea for TypeScriptAn idea for TypeScript ... Allow export default for type. More on github.com
🌐 github.com
7
November 5, 2020
Is it possible to default export a type , and default export an interface without name ?
You can only have 1 default export. More on reddit.com
🌐 r/typescript
42
10
July 29, 2020
🌐
GitHub
github.com › microsoft › TypeScript › issues › 7185
Write a FAQ entry for `export =` vs `export default` / `import ` variants · Issue #7185 · microsoft/TypeScript
February 22, 2016 - DocsThe issue relates to how you learn TypeScriptThe issue relates to how you learn TypeScript · RyanCavanaugh · opened · on Feb 22, 2016 · Issue body actions · People don't understand the difference between these things: export default class Foo {} /* or */ class Foo {} export = Foo; /* or */ export class Foo { } People also don't understand the difference between these things: import x = require('y'); import x from 'y'; import { x } from 'y' import * as x from 'y'; We need to write a comprehensive answer that explains which import statements correctly acquire which exports, and also describe auto-lifting behavior present in some loaders.
Author   RyanCavanaugh
🌐
GitBook
basarat.gitbook.io › typescript › main-1 › defaultisbad
Avoid Export Default | TypeScript Deep Dive
December 31, 2019 - Re-exporting is common for the root index file in npm packages, and forces you to name the default export manually e.g. export { default as Foo } from "./foo"; (with default) vs.
🌐
Mattshelley
mattshelley.dev › export-vs-export-default
JS: Export vs Export Default | Matt Shelley
August 13, 2020 - React appears to use both default export and named exports: ... Among popular libraries there is no preferred choice. TypeScript recommends default export for modules with a primary purpose [4]:
🌐
TypeScript
typescriptlang.org › docs › handbook › modules.html
TypeScript: Documentation - Modules
April 11, 2023 - Classes and function declarations can be authored directly as default exports. Default export class and function declaration names are optional. ... With TypeScript 3.8, you can use export * as ns as a shorthand for re-exporting another module with a name:
Find elsewhere
🌐
Bigfont
bigfont.ca › export-default-vs-export-in-typescript
export default vs export in TypeScript - BigFont.ca
If you’re only exporting a single class or function, use export default... This makes both importing and actually using the import a little easier... This is optimal for consumers. They can name your type whatever they want... and don’t have to do any excessive dotting to find your objects. (Modules - TypeScript, n.d.)
🌐
Zach's Blog
olivare.net › blog › 2023 › death-to-default-exports
Death to Default Exports!
October 12, 2023 - The only advantage of default exports is that you can import them with a different name than they had when they were exported. But why would you ever intentionally do that? To make it harder to do a global project search for the name of the ...
🌐
GitHub
github.com › Microsoft › TypeScript-Handbook › issues › 638
Clarify the pros and cons and the use cases for named export vs default export. · Issue #638 · microsoft/TypeScript-Handbook
August 26, 2017 - If you’re only exporting a single class or function, use export default. One conclusion of the ES Discuss module import topic is that: The syntax should still favor default import. The TypeScript Deep Dive book has a page entitled "Avoid export default".
Author   shaunluttin
🌐
DEV Community
dev.to › vladimirvovk › default-exports-vs-named-exports-2jm0
Default Exports vs Named Exports - DEV Community
August 15, 2022 - // No error with default export import Button from '../components/Text' // now we have a "Button" component // which is actually a "Text" component // TypeScript will throw and error // if import and export names don't match import { Button } from '../components/Text' // we will get an error here ·
🌐
DEV Community
dev.to › phuocng › avoid-using-default-exports-a1c
Avoid using default exports - DEV Community
January 11, 2024 - For example, we might have files ... or multiply two numbers. If we use default exports for those files, we need to specify the names of the functions that will be available in the final package....
🌐
GitHub
github.com › microsoft › TypeScript › issues › 41409
export default type · Issue #41409 · microsoft/TypeScript
November 5, 2020 - export default class MyClass {} export default interface MyInterface {} export type MyType = {} The only way to achieve this now is to use annoying workaround: ... This may cause confusion for newbies as there are no clear reasons why classes and interfaces can be exported as default, but not the types.
Author   hopeless-programmer-online
🌐
Typestronglab
typestronglab.in › tutorial › exports
Default vs Named Exports
Master TypeScript interactively with TypeStrongLab - an all-in-one platform featuring cheatsheets, playground, roadmap, and real-world projects.
🌐
Reddit
reddit.com › r/typescript › is it possible to default export a type , and default export an interface without name ?
r/typescript on Reddit: Is it possible to default export a type , and default export an interface without name ?
July 29, 2020 -

Questions in the title .

Edit :

My bad for not wording it properly .

I am not looking at default exporting two things .

I am looking on being able to default export a type . Also I am looking on being able to default export an interface without name .

There will always be one default export in each module .

I just had two different and not related question not worded properly .

Edit :

Problem solved : Here is how to default export a type . Here is how to default export an interface (you have to use a name on the definition of the interface ).

🌐
rJTutorial
rjtutorial.com › tutorial › typescript-default-exports
TypeScript Default Exports | rJTutorial
In TypeScript, default exports provide a way to designate a single "main" value or entity that a module provides. While a module can have many named exports, it can only have one default export.
🌐
Medium
medium.com › @jamala.zawia › the-difference-between-default-exports-vs-named-exports-in-typescript-5376738944bc
The Difference Between Default Exports vs. Named Exports in TypeScript | by Jamalla Zawia | Medium
November 15, 2024 - Default exports are commonly used when the module only exports one primary thing. It could be an object, class, or function. Since there is only one export, the name used when importing can be arbitrary.
🌐
Reddit
reddit.com › r/typescript › typescript and default exports?
r/typescript on Reddit: TypeScript and default exports?
August 14, 2024 -

I'm using TS with the Sequelize ORM (through the sequelize-typescript package). I'm trying to set up the module that creates the DB connection and inits the various classes in such a way that it exports the various model classes (imported from their respective files) as well as the Sequelize instance that handles the DB itself. For reference, this is my file (trimmed for brevity):

import { Sequelize } from "sequelize-typescript";

import Author from "./author";
import AuthorAlias from "./authoralias";
import AuthorsReferences from "./authorsreferences";
import Book from "./book";
...

export const sequelize = new Sequelize({
  dialect: "sqlite",
  storage: "smdb.db",
  logging: false,
  models: [
    Author,
    AuthorAlias,
    AuthorsReferences,
    Book,
    ...
  ],
});

As written above, I can import the one const as expected:

import { sequelize } from "path-to-models";

But if I add this at the end:

export default {
  sequelize,
  Author,
  AuthorAlias,
  ...
};

not only does it not export any of those symbols, but importing sequelize as a named import no longer works.

What am I missing?

🌐
Medium
medium.com › coding-at-dawn › 5-reasons-i-always-prefer-default-exports-in-react-typescript-projects-c5bbe706db74
5 Reasons I Always Prefer Default Exports in React TypeScript Projects | by Dr. Derek Austin 🥳 | Coding at Dawn | Medium
January 6, 2023 - A lot of developers seem to prefer “named exports,” where you list everything in curly brackets {}, but I think default exports are better. Of course, if you’re new to TypeScript or modern React best practices, then you may not know what export default function means.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Statements › export
export - JavaScript - MDN Web Docs
The export default syntax allows any expression. ... As a special case, functions and classes are exported as declarations, not expressions, and these declarations can be anonymous.