Export syntax variations in Typescript - Step-by-Step Execution

Concept Flow - Export syntax variations

Define variables/functions/classes

↓

Choose export type

↓

Named Export

↓

Export with names

↓

Import accordingly

This flow shows how you define code, choose between named or default exports, and then import them accordingly.

Execution Sample

Typescript

const pi = 3.14;
export { pi };

export default function greet() {
  return 'Hello';
}

This code exports a constant named 'pi' and a default function 'greet'.

Execution Table

Step	Code Line	Action	Exported Item	Export Type
1	const pi = 3.14;	Declare constant pi	None	None
2	export { pi };	Export pi by name	pi = 3.14	Named Export
3	export default function greet() {...}	Export greet as default	greet function	Default Export
4	End of module	Exports ready for import	pi, greet	Named and Default

💡 All exports declared; module ready for import.

Variable Tracker

Variable	Start	After Export
pi	3.14	3.14
greet	function greet()	function greet()

Key Moments - 2 Insights

Why can we have multiple named exports but only one default export?

Named exports allow exporting many items by their names (see step 2), but default export is a single main export (step 3). This is why only one default export is allowed per module.

How do we import named exports vs default exports?

Named exports are imported with curly braces using the exact exported names, while default exports are imported without braces and can be renamed freely. This matches the export types shown in the execution table.

Visual Quiz - 3 Questions

Look at the execution table, what is exported at step 2?

A The default function greet

B The constant pi as a named export

C Nothing is exported

D Both pi and greet

💡 Hint

Check the 'Exported Item' and 'Export Type' columns at step 2 in the execution table.

At which step is the default export declared?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for 'Default Export' in the 'Export Type' column in the execution table.

If we remove the line 'export { pi };', what changes in the variable tracker?

A pi remains undefined after export

B pi becomes default export

C pi is still exported as named

D greet becomes named export

💡 Hint

Check how 'pi' changes from 'Start' to 'After Export' in the variable tracker.

Concept Snapshot

Export syntax in TypeScript:
- Named export: export { item1, item2 };
- Default export: export default item;
- Multiple named exports allowed
- Only one default export per module
- Import named with braces, default without
- Use exports to share code between files

Full Transcript

This lesson shows how TypeScript exports work. First, you define variables or functions. Then you choose to export them either as named exports or a default export. Named exports let you export many items by name, like 'pi' in step 2. Default export lets you export one main item, like the 'greet' function in step 3. The execution table traces these steps clearly. The variable tracker shows how 'pi' and 'greet' are defined and exported. Key moments explain why only one default export is allowed and how to import each type. The quiz tests your understanding of these export steps and their effects. Finally, the snapshot summarizes the syntax and rules for quick reference.