Declaration file syntax (.d.ts) in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this declaration usage?

Given the following declaration file and usage, what will be the output when running the compiled JavaScript?

Typescript

declare module "mathUtils" {
  export function add(a: number, b: number): number;
}

import { add } from "mathUtils";
console.log(add(3, 4));

A undefined

B 7

C TypeError: add is not a function

D Compilation error

💡 Hint

Declaration files only describe types and do not provide implementations.

The declaration file .d.ts only tells TypeScript about the shape of the module but does not provide any actual code. When running the compiled JavaScript, since there is no implementation for add, it results in a runtime TypeError.

🧠 Conceptual

intermediate

Which syntax correctly declares a constant in a .d.ts file?

Select the correct way to declare a constant named PI with type number in a declaration file.

A declare const PI: number;

B const PI: number = 3.14;

C declare let PI: number = 3.14;

D export const PI = 3.14;

💡 Hint

Declaration files only declare types and do not assign values.

In declaration files, you use declare to tell TypeScript about the existence and type of variables without assigning values. Option A correctly declares PI as a constant of type number without initialization.

🔧 Debug

advanced

Identify the syntax error in this .d.ts interface declaration

Find the syntax error in the following declaration file snippet:

Typescript

interface User {
  name: string;
  age: number;
  greet(): void
}

A Missing semicolon after 'name: string'

B Interface keyword should be 'declare interface'

C Methods cannot be declared without implementation in .d.ts files

D Property 'age' should be optional

💡 Hint

Check punctuation carefully in interface declarations.

In TypeScript interfaces, each property declaration must end with a semicolon or comma. The line name: string is missing a semicolon, causing a syntax error.

🚀 Application

advanced

How to declare a function with overloads in a .d.ts file?

You want to declare a function format that can be called with either one string argument or two string arguments. Which declaration is correct in a .d.ts file?

A declare function format(text: string | (text: string, style: string)): string;

B

declare function format(text: string): string;
declare function format(text: string, style: string): string;

C declare function format(text: string, style?: string): string;

D declare function format(...args: string[]): string;

💡 Hint

Overloads are declared as multiple function declarations with the same name.

Function overloads in declaration files are declared as multiple declare function statements with the same name but different parameters. Option B correctly declares two overloads for format.

❓ Predict Output

expert

What is the type of 'data' after importing from this declaration file?

Given this declaration file snippet and usage, what is the type of data in the TypeScript code?

Typescript

declare module "dataModule" {
  interface Data {
    id: number;
    value: string;
  }
  const data: Data[];
  export default data;
}

import data from "dataModule";

// What is the type of 'data' here?

A Object with properties 'id' and 'value' but not an array

B Any

C Unknown

D Array of objects with properties 'id' (number) and 'value' (string)

💡 Hint

Look at the declared type of 'data' in the module.

The declaration states const data: Data[]; which means data is an array of Data objects. Each Data object has id as a number and value as a string.