export default vs export: which to choose in TypeScript?

TypeScript export vs default export: figuring it out once and for all

Hi, friend! If you're just starting your journey with TypeScript (or you're not a beginner but still get confused about exports), this article is your lifeline. The topic "TypeScript export vs default export" is one of the hottest on Stack Overflow, and for good reason. It seems like a small detail, but so much debate! Let's break it down piece by piece and forever remember when to use export and when to use export default.

We won't just dryly list the rules. We'll go through real-life examples, typical beginner mistakes, and give specific recommendations. Let's go!

What is export in TypeScript and why is it needed?

Imagine you're writing a large program. You wouldn't stuff all the code into one file, right? Of course not. You split it into modules: one file handles user operations, another handles calculations, a third handles the interface. Export is a way to tell TypeScript: "Hey, this function, class, or variable can be used in other files." And import is a way to say: "Let me take this thing from another file."

In TypeScript, there are two main types of export: named export and default export. And this is where things get interesting.

Named export — precision and order

Named export is when you explicitly specify the name of what you're exporting. It's like putting a bright label on each box in your garage: "Tools", "Sports Equipment", "Old Textbooks".

The syntax is very simple. Just add the keyword export before the declaration:

Named export example

// utils.ts\nexport const PI = 3.14159;\n\nexport function calculateArea(radius: number): number {\n  return PI * radius * radius;\n}\n\nexport class Circle {\n  constructor(public radius: number) {}\n}

Now let's import this into another file:

// app.ts\nimport { PI, calculateArea, Circle } from './utils';\n\nconsole.log(PI); // 3.14159\nconst area = calculateArea(5);\nconst myCircle = new Circle(10);

Notice the curly braces { } during import. They are a sure sign of named export. You can import only what you need, and you must use the same names specified during export (or rename them using as, but more on that later).

Advantages of named export

\n
• Explicitness: You always see exactly what is being exported from the module.
\n
• Autocomplete: IDEs (e.g., VS Code) provide great name suggestions during import.
\n
• Refactoring: If you rename an exported function, the IDE renames it in all import locations. It's safe.
\n
• Tree-shaking: Bundlers (Webpack, Vite) can "shake off" unused code, reducing the final bundle size.
\n

Default export — convenience and conciseness

Default export is when you say: "There is one main entity in this file, and I want it to be convenient to import." It's like saying: "Here's my business card, it has all the essentials."

Each module can have only one default export. Syntax:

Default export example

// logger.ts\nconst log = (message: string): void => {\n  console.log(`[LOG]: ${message}`);\n};\n\nexport default log;

Or you can declare it directly:

export default function log(message: string): void {\n  console.log(`[LOG]: ${message}`);\n}

Import looks like this (without curly braces!):

// main.ts\nimport myLog from '