Export syntax variations in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export the function named greet.

Typescript

export [1] function greet() { console.log('Hello!'); }

Drag options to blanks, or click blank then click option'

Adefault

Bconst

Clet

Dvar

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable declaration keywords like const or let instead of default.

Forgetting to add export keyword.

Using export default exports the function as the default export of the module.

2fill in blank

medium

Complete the code to export multiple named constants.

Typescript

export const [1] = 42, pi = 3.14;

Drag options to blanks, or click blank then click option'

Aresult

Banswer

Cvalue

Dscore

Attempts:

3 left

💡 Hint

Common Mistakes

Using reserved words or invalid variable names.

Forgetting to use const keyword.

We export the constant named answer along with pi.

3fill in blank

hard

Fix the error in the export statement for a type alias.

Typescript

export [1] User = { name: string; age: number };

Drag options to blanks, or click blank then click option'

Aconst

Binterface

Ctype

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Using const or class keywords for type aliases.

Confusing interface with type alias.

Type aliases use the type keyword to define a new type.

4fill in blank

hard

Fill both blanks to export a function and a variable together.

Typescript

export { [1], [2] };

Drag options to blanks, or click blank then click option'

Agreet

Banswer

Cresult

Dcalculate

Attempts:

3 left

💡 Hint

Common Mistakes

Using names that are not declared in the module.

Forgetting commas between names.

This syntax exports the named items greet and answer together.

5fill in blank

hard

Fill all three blanks to re-export named exports from another module.

Typescript

export { [1], [2] as alias, [3] } from './module';

Drag options to blanks, or click blank then click option'

Afoo

Bbar

Cbaz

Dqux

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid names not exported by the other module.

Misplacing the as keyword.

This re-exports qux, renames bar to alias, and re-exports foo from another module.

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