Writing custom declaration files in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using a custom declaration?

Given the custom declaration file math-utils.d.ts below, what will be the output of the TypeScript code?

Typescript

declare module 'math-utils' {
  export function square(x: number): number;
}

import { square } from 'math-utils';

console.log(square(5));

A 25

B undefined

C TypeError at runtime

D Compilation error: Cannot find module 'math-utils'

💡 Hint

Think about what a declaration file does and what it does not provide.

The declaration file math-utils.d.ts only tells TypeScript about the shape of the module but does not provide an implementation. Without the actual JavaScript code for 'math-utils', the compiler or runtime will fail to find the module.

🧠 Conceptual

intermediate

Which statement about custom declaration files is true?

Choose the correct statement about writing custom declaration files in TypeScript.

A Declaration files provide runtime implementations for modules.

B Declaration files must always be named with a <code>.ts</code> extension.

C Declaration files allow TypeScript to understand types of JavaScript modules without source code.

D Declaration files automatically generate JavaScript code during compilation.

💡 Hint

Think about the purpose of declaration files in TypeScript.

Declaration files (.d.ts) describe the types and interfaces of JavaScript code so TypeScript can type-check code that uses those modules, even if the source code is not available.

🔧 Debug

advanced

Why does this custom declaration cause a TypeScript error?

Consider the following declaration file custom-lib.d.ts and usage code. Why does TypeScript report an error?

Typescript

declare module 'custom-lib' {
  export const version: string;
  export function greet(name: string): void;
}

import { version, greet } from 'custom-lib';

greet(42);

A Because <code>greet</code> is called with a number instead of a string.

B Because <code>version</code> is not used in the code.

C Because the module declaration is missing a default export.

D Because the declaration file must use <code>export default</code> syntax.

💡 Hint

Check the function parameter types in the declaration and usage.

The declaration specifies greet takes a string, but the code calls it with a number (42), causing a type error.

📝 Syntax

advanced

Which custom declaration file syntax is correct for exporting a class?

Choose the correct syntax for declaring a module that exports a class named Person with a constructor taking a name string.

A

declare module 'people' {
  export class Person {
    constructor(name);
  }
}

B

declare module 'people' {
  export class Person {
    constructor(name: string);
  }
}

C

declare module 'people' {
  export class Person {
    constructor(name: string) {}
  }
}

D

declare module 'people' {
  export class Person {
    constructor(name: string): void;
  }
}

💡 Hint

Remember that declaration files only describe types and signatures, not implementations.

Option B correctly declares the class and constructor signature without implementation. Option B misses the type annotation. Option B provides an implementation body, which is not allowed. Option B incorrectly specifies a return type for a constructor.

🚀 Application

expert

How many properties does the declared interface have after merging?

Given these two declaration files merged by TypeScript, how many properties does the interface Config have?

declare module 'app' {
  interface Config {
    host: string;
    port: number;
  }
}

declare module 'app' {
  interface Config {
    secure: boolean;
  }
}

A 3

B 2

C 1

D 4

💡 Hint

Think about how TypeScript merges interface declarations with the same name in the same module.

TypeScript merges interface declarations with the same name by combining their properties. Here, Config has host, port, and secure, totaling 3 properties.