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.