Why modules are needed in TypeScript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a function from a module.

Typescript

export function [1]() { console.log('Hello from module'); }

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

Afunction

Bconsole

Clog

Dgreet

Attempts:

3 left

💡 Hint

Common Mistakes

Using reserved words like 'console' or 'function' as function names.

The function name must be provided after export function to make it available outside the module.

2fill in blank

medium

Complete the code to import the exported function from a module.

Typescript

import { [1] } from './greetings';

[1]();

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

Agreet

Bconsole

Clog

Dhello

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect or different names than exported.

You import the function by the exact name it was exported with, here greet.

3fill in blank

hard

Fix the error in the module export syntax.

Typescript

export [1] greet() { console.log('Hi'); }

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

Afunc

Bfunct

Cfunction

Ddef

Attempts:

3 left

💡 Hint

Common Mistakes

Using shortened or incorrect keywords like 'funct' or 'def'.

The correct keyword to declare a function is function. Other options are invalid in TypeScript.

4fill in blank

hard

Fill both blanks to create a named export and import it correctly.

Typescript

export [1] [2] = 42;

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

Aconst

Blet

Canswer

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'let' instead of 'const' for exports.

Using generic names like 'value' that are less descriptive.

You export a constant using export const and give it a name like answer to import later.

5fill in blank

hard

Fill all three blanks to export a default class and import it with a custom name.

Typescript

export default class [1] {
  greet() { console.log('Hello'); }
}

import [2] from './Greeter';

const greeter = new [3]();
greeter.greet();

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

AGreeter

BMyGreeter

CGreeterClass

DGreet

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names inconsistently between import and instantiation.

The class is named Greeter when exported as default. You can import it with any name, here MyGreeter, and use that name to create an instance.

Practice

1. Why do we need modules in TypeScript?

easy

A. To split code into smaller, manageable parts

B. To make code run faster

C. To write code without any errors

D. To avoid using variables

Solution

1. Step 1: Understand the purpose of modules

   Modules help organize code by splitting it into smaller parts.

2. Step 2: Identify the main benefit

   This splitting makes code easier to manage and understand.

3. Final Answer:

   To split code into smaller, manageable parts -> Option A

4. Quick Check:

   Modules organize code = B [OK]

Hint: Modules help organize and manage code easily [OK]

Common Mistakes:

• Thinking modules make code faster
• Believing modules fix all errors automatically
• Confusing modules with variable declarations

2. Which of the following is the correct way to export a function named greet from a TypeScript module?

easy

A. function greet() { console.log('Hello'); }

B. export function greet() { console.log('Hello'); }

C. export greet function() { console.log('Hello'); }

D. function greet() { console.log('Hello'); } export greet;

Solution

1. Step 1: Recall correct export syntax

   In TypeScript, to export a function, use export function functionName() {}.

2. Step 2: Check each option

   export function greet() { console.log('Hello'); } uses correct syntax. Options B and C have wrong order or missing keywords. function greet() { console.log('Hello'); } does not export.

3. Final Answer:

   export function greet() { console.log('Hello'); } -> Option B

4. Quick Check:

   Correct export syntax = D [OK]

Hint: Use 'export' before function to export it [OK]

Common Mistakes:

• Placing 'export' after function name
• Forgetting to export the function
• Using invalid export syntax

3. Consider two TypeScript files:
// file1.ts
export const value = 42;
// file2.ts
import { value } from './file1';
console.log(value);
What will be the output when file2.ts is run?

medium

A. null

B. undefined

C. Error: Cannot find module './file1'

D. 42

Solution

1. Step 1: Understand export and import

   file1.ts exports a constant named value with 42. file2.ts imports it correctly.

2. Step 2: Predict console output

   Since import is correct, console.log(value) prints 42.

3. Final Answer:

   42 -> Option D

4. Quick Check:

   Imported value logs 42 = A [OK]

Hint: Imported constants print their exported values [OK]

Common Mistakes:

• Assuming import fails without file extension
• Expecting undefined without export
• Confusing import syntax

4. What is wrong with this TypeScript module code?

export const a = 10;
const b = 20;
import { b } from './moduleB';

medium

A. The import statement must be at the top before any other code

B. You cannot import a variable named 'b' if it's declared locally

C. You cannot import after export in the same file

D. There is no error in this code

Solution

1. Step 1: Check import statement placement

   In TypeScript, import statements must be at the top before any other code.

2. Step 2: Identify the error

   Here, import comes after export and variable declaration, which is invalid.

3. Final Answer:

   The import statement must be at the top before any other code -> Option A

4. Quick Check:

   Imports must be top-level = A [OK]

Hint: Always place imports at the top of the file [OK]

Common Mistakes:

• Placing imports after code
• Thinking imports can be anywhere
• Confusing import and export order

5. You have two modules:
// mathUtils.ts
export function add(x: number, y: number) { return x + y; }
export function multiply(x: number, y: number) { return x * y; }
// app.ts
import * as math from './mathUtils';
console.log(math.add(2, 3));
console.log(math.multiply(4, 5));
Why is using import * as math helpful in this case?

hard

A. It automatically fixes type errors in imported functions

B. It makes the code run faster by bundling functions

C. It groups all exports under one name to avoid name conflicts

D. It prevents the need to export functions in mathUtils.ts

Solution

1. Step 1: Understand import * as syntax

   This syntax imports all exported members under a single namespace object.

2. Step 2: Identify benefit

   Grouping exports under math avoids naming conflicts and keeps code organized.

3. Final Answer:

   It groups all exports under one name to avoid name conflicts -> Option C

4. Quick Check:

   Namespace import groups exports = C [OK]

Hint: Use 'import * as' to group exports under one name [OK]

Common Mistakes:

• Thinking it improves performance
• Believing it fixes type errors automatically
• Assuming exports are not needed