Export syntax variations in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the syntax to export a single variable in TypeScript?

Use <code>export const variableName = value;</code> to export a single variable.

beginner

How do you export multiple variables or functions at once?

Use export { name1, name2, name3 }; to export multiple items together.

intermediate

What is the difference between default export and named export?

Default export exports a single value per file using export default. Named exports export multiple values by name using export.

intermediate

How do you rename an export while exporting it?

Use export { originalName as newName }; to rename an export.

intermediate

How do you re-export everything from another module?

Use export * from './module'; to re-export all exports from another file.

Which syntax exports a default function in TypeScript?

A export myFunc() default {}

B export function default myFunc() {}

C export default function myFunc() {}

D default export function myFunc() {}

The correct syntax for default export of a function is export default function myFunc() {}.

How do you export multiple variables named a and b together?

A export a & b;

B export { a, b };

C export (a, b);

D export a, b;

Use curly braces to export multiple named variables: export { a, b };.

What does export * from './file'; do?

A Exports nothing

B Imports all exports from './file' only

C Deletes all exports from './file'

D Exports all exports from './file' again from current file

This syntax re-exports all exports from another module.

How to rename export 'foo' to 'bar' while exporting?

A export { foo as bar };

B export { bar as foo };

C export foo to bar;

D export rename foo to bar;

Use export { foo as bar }; to rename an export.

Which is NOT a valid export syntax?

A export function() {}

B export default class MyClass {}

C export const x = 5;

D export { x, y };

Functions must have a name when exported as named exports. export function() {} is invalid.

Explain the difference between named exports and default exports in TypeScript.

Think about how you import them too.

Describe how to re-export all exports from another module and why it might be useful.

Imagine combining exports from many files into one.

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