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.

Practice

1. Which of the following is the correct way to export a function named calculate as a named export in TypeScript?

easy

A. module.exports = calculate;

B. export default function calculate() { /*...*/ }

C. export = calculate;

D. export function calculate() { /*...*/ }

Solution

1. Step 1: Understand named export syntax

   Named exports use the keyword export before the declaration to share multiple items.

2. Step 2: Identify correct syntax for named function export

   The syntax export function calculate() {} correctly exports the function as named export.

3. Final Answer:

   export function calculate() { /*...*/ } -> Option D

4. Quick Check:

   Named export uses export before declaration [OK]

Hint: Use 'export' before function for named export [OK]

Common Mistakes:

• Confusing default export with named export
• Using CommonJS syntax like module.exports
• Using 'export =' which is for different module style

2. Which of the following is the correct syntax to export a constant named PI as the default export in TypeScript?

easy

A. export const default PI = 3.14;

B. const PI = 3.14; export default PI;

C. export default const PI = 3.14;

D. export PI = 3.14;

Solution

1. Step 1: Understand default export syntax

   Default export can export a value or variable by writing export default followed by the value or variable.

2. Step 2: Identify correct way to export constant as default

   We first declare const PI = 3.14; then export it as default using export default PI;.

3. Final Answer:

   const PI = 3.14; export default PI; -> Option B

4. Quick Check:

   Default export uses 'export default' after declaration [OK]

Hint: Declare first, then export default variable [OK]

Common Mistakes:

• Trying to combine 'const' and 'default' in one statement incorrectly
• Using 'export const default' which is invalid
• Confusing named export with default export syntax

3. What will be the output of the following TypeScript code?

export const a = 5;
export const b = 10;

import * as values from './module';
console.log(values.a + values.b);

medium

A. 15

B. undefinedundefined

C. Error: Cannot use import statement outside a module

D. NaN

Solution

1. Step 1: Understand named exports and import * syntax

   The code exports two constants a and b as named exports. The import statement imports all exports as an object named values.

2. Step 2: Calculate the sum of imported values

   Accessing values.a and values.b gives 5 and 10 respectively. Their sum is 15.

3. Final Answer:

   15 -> Option A

4. Quick Check:

   Named exports imported as object sum correctly [OK]

Hint: Import * as object to access all named exports [OK]

Common Mistakes:

• Expecting default export when none is present
• Confusing import syntax causing runtime errors
• Assuming imported values are undefined

4. Identify the error in the following TypeScript export code:

const name = "Alice";
export { name as default };

medium

A. The variable 'name' must be declared with 'export' keyword.

B. The export statement is missing a semicolon.

C. You cannot rename a named export to default in this way.

D. There is no error; this code is correct.

Solution

1. Step 1: Understand export renaming rules

   Renaming exports is allowed, but renaming a named export to default using this syntax is invalid in TypeScript.

2. Step 2: Identify correct way to export default with rename

   To export a variable as default, use export default name; instead of renaming in braces.

3. Final Answer:

   You cannot rename a named export to default in this way. -> Option C

4. Quick Check:

   Default export must use 'export default' syntax [OK]

Hint: Use 'export default' for default export, not rename [OK]

Common Mistakes:

• Trying to rename named export to default inside braces
• Confusing export syntax for default and named exports
• Assuming semicolon omission causes error

5. Given the following module code:

const x = 1;
const y = 2;
const z = 3;

export { x as default, y, z };

Which import statement correctly imports x as default and y and z as named imports?

hard

A. import x, { y, z } from './module';

B. import { default as x, y, z } from './module';

C. import { x, y, z } from './module';

D. import * as all from './module';

Solution

1. Step 1: Understand export renaming and import syntax

   The module exports x renamed as default, and y, z as named exports.

2. Step 2: Identify correct import syntax for default and named exports

   To import default export as x and named exports y, z, use import x, { y, z } from './module';.

3. Final Answer:

   import x, { y, z } from './module'; -> Option A

4. Quick Check:

   Default import first, then named in braces [OK]

Hint: Default import first, named imports in braces [OK]

Common Mistakes:

• Using named import syntax for default export
• Trying to import default as named
• Using import * without destructuring