Coder Perfect

Default export vs. Typescript export


What is the difference between export and default export in Typescript? I see people exporting their classes in every tutorial, and I can’t compile my code unless I include the default keyword before exporting.

In addition, the default export keyword was not mentioned in the official typescript manual.

export class MyClass {

  collection = [1,2,3];


It will not compile. But:

export default class MyClass {

  collection = [1,2,3];



The error is: error TS1192: Module ‘”src/app/MyClass”‘ has no default export.

Asked by fos.alex

Solution #1

Export by default (export default)

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

The primary distinction is that each file can only have one default export, which you import as follows:

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 { /* ... */ }

You can have many exports per file when you use a named export, and you must import the exports surrounded by braces:

import { MyClass } from "./MyClass";

Note that adding the braces will fix the mistake you’re describing in your inquiry, and the name in the braces must match the name of the export.

If your file exported multiple classes, you may import them both as follows:

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

Alternatively, you might use * as: to import everything that was exported.

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

Which to use?

In ES6, default exports are more concise because its use case is more prevalent; but, while working on TypeScript code that is internal to a project, I nearly always prefer to use named exports instead of default exports because it works better with code refactoring. If you default export a class and then rename it, it will just rename the class in that file and not any of its references in other files. It will rename the class and any references to it in all other files if you use named exports.

It also works well with barrel files (files that export other files using namespace exports—export *). This is demonstrated in the “example” portion of this answer.

Note that my use of named exports even when there is only one export goes against the TypeScript Handbook’s recommendations (see the “Red Flags” section). This suggestion, in my opinion, only applicable if you’re writing an API that other people may use and the code isn’t internal to your project. I’ll use a default export when developing an API for users to utilize, so they can do import myLibraryDefaultExport from “my-library-name”;. If you disagree with me on this, I’d be interested in hearing your explanation.

That being said, do what you want! You can utilize one or both of them at the same time.

Additional Points

A default export is a named export with the name default, thus if the file has one, you can import it as well by doing:

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

Also, keep in mind that there are various ways to import:

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

Answered by David Sherret

Solution #2

I was trying to address the same problem when I came across an intriguing tip from Basarat Ali Syed of TypeScript Deep Dive, who suggested that instead of using the generic export default declaration for a class, we should append the export tag to the class declaration. Instead, the imported class should be specified in the module’s import command.

In other words, instead of

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

as well as the straightforward import Foo from ‘./foo’ should be used in the module that will import it.

export class Foo {
    // ...

and in the importer, import Foo from ‘./foo’.

The reason for this is the difficulty of restructuring classes and the additional work required for exports. Avoid Export Default is Basarat’s original post.

Answered by Hilton Fernandes

Solution #3

Named export

The export keyword in TS allows you to export. It can then be imported with the command import name from “./mydir”;. This is referred to as a named export. Multiple named exports can be exported from a single file. The names of the imports must also match the names of the exports. Consider the following scenario:

// foo.js file
export class foo{}
export class bar{}

// main.js file in same dir
import {foo, bar} from "./foo";

The following syntax is also acceptable:

// foo.js file
function foo() {};
function bar() {};
export {foo, bar};

// main.js file in same dir
import {foo, bar} from './foo'

Default export

A default export can also be used. Each file can only have one default export. When importing a default export we omit the square brackets in the import statement. We can also choose our own name for our import.

// foo.js file
export default class foo{}

// main.js file in same directory
import abc from "./foo";

It’s just JavaScript

Modules and their associated keyword like import, export, and export default are JavaScript constructs, not typescript. Typescript, on the other hand, added the ability to export and import interfaces and type aliases.

Answered by Willem van der Veen

Solution #4

Here’s a simple object exporting example.

var MyScreen = {

    /* ... */

    width : function (percent){

        return window.innerWidth / 100 * percent


    height : function (percent){

        return window.innerHeight / 100 * percent



export default MyScreen

You will import this only when it is needed in the main file (Use when you don’t want or need to create a new instance) and it is not global:

import MyScreen from "./module/screen";
console.log( MyScreen.width(100) );

Answered by Nikola Lukic

Post is based on