Declaring modules in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a simple declared module

What is the output when running this TypeScript code that uses a declared module?

Typescript

declare module 'mathUtils' {
  export function square(x: number): number;
}

import { square } from 'mathUtils';

console.log(square(4));

A 16

B undefined

C Error: Cannot find module 'mathUtils'

D 4

💡 Hint

Declared modules only provide type information and do not include implementation.

Declared modules in TypeScript only describe types and signatures. Without an actual implementation, importing from 'mathUtils' causes a runtime error.

🧠 Conceptual

intermediate

Purpose of 'declare module' in TypeScript

What is the main purpose of using declare module in TypeScript?

A To provide type information for modules without implementations

B To create a new JavaScript module at runtime

C To import modules dynamically

D To export variables from a module

💡 Hint

Think about how TypeScript handles external JavaScript libraries without type definitions.

declare module is used to tell TypeScript about the shape of modules that exist elsewhere, often JavaScript libraries, so the compiler can check types without needing the actual code.

🔧 Debug

advanced

Why does this declared module cause a type error?

Given this declared module and usage, why does TypeScript report an error?

Typescript

declare module 'config' {
  export const port: string;
}

import { port } from 'config';

const serverPort: number = port;

A Type 'string' is not assignable to type 'number'

B Missing export in module 'config'

C Cannot redeclare block-scoped variable 'port'

D Module 'config' not found

💡 Hint

Check the declared type of port and the variable it is assigned to.

The declared module says port is a string, but the code tries to assign it to a number variable, causing a type mismatch error.

📝 Syntax

advanced

Correct syntax for declaring a module with a default export

Which option correctly declares a module with a default export of a function named greet?

A

declare module 'hello' {
  default export function greet(name: string): string;
}

B

declare module 'hello' {
  export default function greet(name: string): string;
}

C

declare module 'hello' {
  export function default greet(name: string): string;
}

D

declare module 'hello' {
  export = function greet(name: string): string;
}

💡 Hint

Remember the order of keywords for default exports in declarations.

The correct syntax uses export default function. Other options misuse the order or keywords, causing syntax errors.

🚀 Application

expert

Number of properties in a declared module's interface

Given this declared module, how many properties does the interface Settings have?

Typescript

declare module 'appSettings' {
  interface Settings {
    theme: string;
    version: number;
    debug: boolean;
  }
  export const config: Settings;
}

A 0

B 2

C 1

D 3

💡 Hint

Count all properties listed inside the interface.

The interface Settings declares three properties: theme, version, and debug.

Practice

1. What is the main purpose of using declare module in TypeScript?

easy

A. To import modules dynamically at runtime

B. To create new modules with implementation

C. To execute JavaScript code inside TypeScript files

D. To tell TypeScript about the shape of a module without actual code

Solution

1. Step 1: Understand the role of declare module

   This keyword is used to describe the shape or types of a module when TypeScript has no information about it.

2. Step 2: Differentiate from other module actions

   It does not import, execute, or create code but only declares types for existing modules.

3. Final Answer:

   To tell TypeScript about the shape of a module without actual code -> Option D

4. Quick Check:

   declare module = describe types only [OK]

Hint: Declare modules to describe types, not to run code [OK]

Common Mistakes:

• Thinking declare module imports or runs code
• Confusing declare module with creating actual modules
• Using declare module to execute JavaScript

2. Which of the following is the correct syntax to declare a module named "my-lib" in TypeScript?

easy

A. declare module 'my-lib' { export function foo(): void; }

B. module declare 'my-lib' { export function foo(): void; }

C. declare 'my-lib' module { export function foo(): void; }

D. module 'my-lib' declare { export function foo(): void; }

Solution

1. Step 1: Recall correct syntax for module declaration

   The correct syntax starts with declare module 'module-name' followed by curly braces containing declarations.

2. Step 2: Check each option's order and keywords

   Only declare module 'my-lib' { export function foo(): void; } uses the correct order: declare module 'my-lib' { ... }. Others mix keywords incorrectly.

3. Final Answer:

   declare module 'my-lib' { export function foo(): void; } -> Option A

4. Quick Check:

   declare module 'name' { ... } syntax [OK]

Hint: Start with 'declare module' then module name in quotes [OK]

Common Mistakes:

• Swapping 'module' and 'declare' keywords
• Omitting quotes around module name
• Using wrong keyword order

3. Given this declaration file:

declare module 'math-utils' {
  export function add(a: number, b: number): number;
}

What will be the output of this TypeScript code?

import { add } from 'math-utils';
console.log(add(2, 3));

medium

A. undefined

B. Runtime error: add is not a function

C. Compile error: Cannot find module 'math-utils'

D. 5

Solution

1. Step 1: Understand what declare module does

   It only tells TypeScript about types but does not provide actual implementation.

2. Step 2: Analyze runtime behavior

   Since no real code exists for 'math-utils', importing and calling add will cause a runtime error because add is undefined.

3. Final Answer:

   Runtime error: add is not a function -> Option B

4. Quick Check:

   declare module = types only, no code [OK]

Hint: Declare modules don't provide code, so runtime fails [OK]

Common Mistakes:

• Assuming declare module provides implementation
• Expecting correct output without real code
• Confusing compile-time types with runtime code

4. Identify the error in this module declaration:

declare module myLib {
  export const version: string;
}

medium

A. Missing function declaration

B. Cannot export constants in declare module

C. Module name must be in quotes

D. Syntax is correct, no error

Solution

1. Step 1: Check module name syntax

   Module names must be string literals in quotes, like 'myLib', not bare identifiers.

2. Step 2: Verify export syntax

   Exporting constants is allowed, so no error there.

3. Final Answer:

   Module name must be in quotes -> Option C

4. Quick Check:

   Module names need quotes [OK]

Hint: Always put module names in quotes in declare module [OK]

Common Mistakes:

• Omitting quotes around module name
• Thinking export const is invalid
• Assuming function declaration is mandatory

5. You want to declare a module "config" that exports an object with optional properties apiUrl (string) and timeout (number). Which declaration correctly models this?

hard

A. declare module 'config' {
export const settings: { apiUrl?: string; timeout?: number };
}

B. declare module 'config' {
export const settings: { apiUrl: string; timeout: number };
}

C. declare module 'config' {
export function settings(): { apiUrl?: string; timeout?: number };
}

D. declare module 'config' {
export let settings: { apiUrl: string; timeout?: number };
}

Solution

1. Step 1: Understand optional properties syntax

   Optional properties use the ? symbol after the property name.

2. Step 2: Match declaration to requirements

   declare module 'config' { export const settings: { apiUrl?: string; timeout?: number }; } correctly declares settings as an exported constant object with both properties optional.

3. Step 3: Check other options

   declare module 'config' { export const settings: { apiUrl: string; timeout: number }; } requires both properties (not optional). declare module 'config' { export function settings(): { apiUrl?: string; timeout?: number }; } exports a function, not an object. declare module 'config' { export let settings: { apiUrl: string; timeout?: number }; } makes apiUrl required, which is incorrect.

4. Final Answer:

   declare module 'config' { export const settings: { apiUrl?: string; timeout?: number }; } -> Option A

5. Quick Check:

   Optional props use ? in type declarations [OK]

Hint: Use ? after property name for optional fields [OK]

Common Mistakes:

• Forgetting ? for optional properties
• Using function instead of object export
• Making required properties when optional needed