Declaration file syntax (.d.ts) in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable of type string in a declaration file.

Typescript

declare let message: [1];

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

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' or 'boolean' instead of 'string' for text variables.

The declare keyword is used to declare variables in a declaration file. Here, message is declared as a string.

2fill in blank

medium

Complete the code to declare a function that takes a number and returns a string.

Typescript

declare function formatNumber(value: [1]): string;

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

Astring

Bboolean

Cnumber

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' as the parameter type instead of 'number'.

The function formatNumber takes a parameter value of type number and returns a string.

3fill in blank

hard

Fix the error in the interface declaration by completing the property type.

Typescript

interface User {
  id: [1];
  name: string;
}

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

Aboolean

Bnumber

Cany

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' or 'boolean' for the id property.

The id property is usually a number to uniquely identify a user.

4fill in blank

hard

Fill both blanks to declare a module and export a constant string.

Typescript

declare module "myModule" {
  export const version: [1];
  export function getName(): [2];
}

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

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using different types for version and getName return type.

The constant version and the return type of getName are both string types.

5fill in blank

hard

Fill all three blanks to declare a namespace with an interface and a function.

Typescript

declare namespace Utils {
  interface Logger {
    log(message: [1]): void;
  }
  function createLogger(level: [2]): Logger;
  const defaultLevel: [3];
}

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

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number for log message or logging level.

The log method takes a string message. The level parameter and defaultLevel constant are boolean to indicate if logging is enabled or not.

Practice

1. What is the main purpose of a TypeScript declaration file (.d.ts)?

easy

A. To describe the types and structure of existing JavaScript code without implementation

B. To write executable TypeScript code

C. To compile TypeScript into JavaScript

D. To store runtime configuration settings

Solution

1. Step 1: Understand the role of declaration files

   Declaration files provide type information about existing JavaScript code but do not contain actual code implementations.

2. Step 2: Differentiate from other file types

   Unlike .ts files that contain executable code, .d.ts files only describe types and interfaces.

3. Final Answer:

   To describe the types and structure of existing JavaScript code without implementation -> Option A

4. Quick Check:

   Declaration files describe types only [OK]

Hint: Declaration files describe types, not code execution [OK]

Common Mistakes:

• Thinking declaration files contain executable code
• Confusing declaration files with config files
• Assuming declaration files compile to JavaScript

2. Which of the following is the correct syntax to declare a function named greet that takes a string and returns void in a .d.ts file?

easy

A. function greet(name: string): void;

B. function greet(name: string): void {}

C. declare greet(name: string): void;

D. declare function greet(name: string): void;

Solution

1. Step 1: Recognize declaration syntax in .d.ts files

   Functions must be declared with the declare keyword and no implementation body.

2. Step 2: Check each option

   function greet(name: string): void; misses declare, declare greet(name: string): void; has incorrect syntax, function greet(name: string): void {} includes a function body which is not allowed in declaration files.

3. Final Answer:

   declare function greet(name: string): void; -> Option D

4. Quick Check:

   Use declare function without body [OK]

Hint: Use 'declare function' with no body in .d.ts files [OK]

Common Mistakes:

• Omitting the 'declare' keyword
• Adding function bodies in declaration files
• Using incorrect declaration syntax

3. Given the following declaration in a .d.ts file:

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

What will be the TypeScript type of result after this code?

import { add } from "math-lib";
const result = add(5, 3);

medium

A. string

B. void

C. number

D. any

Solution

1. Step 1: Analyze the declaration file

   The module "math-lib" declares an exported function add that takes two numbers and returns a number.

2. Step 2: Understand the import and usage

   The code imports add and calls it with two numbers, so the result type matches the declared return type: number.

3. Final Answer:

   number -> Option C

4. Quick Check:

   Declared return type = number [OK]

Hint: Return type in declaration matches usage type [OK]

Common Mistakes:

• Assuming return type is any by default
• Confusing return type with parameter types
• Ignoring module declaration types

4. Identify the error in this .d.ts declaration:

declare var count: number = 10;

medium

A. Variables cannot be declared with initial values in .d.ts files

B. The keyword 'var' is not allowed in declaration files

C. The type 'number' is invalid in declaration files

D. The 'declare' keyword is missing

Solution

1. Step 1: Understand variable declaration in .d.ts files

   Declaration files only declare types and variables without assigning values.

2. Step 2: Check the given code

   The code assigns = 10 which is not allowed in declaration files.

3. Final Answer:

   Variables cannot be declared with initial values in .d.ts files -> Option A

4. Quick Check:

   No initial values allowed in declarations [OK]

Hint: No initial values in declarations, only types [OK]

Common Mistakes:

• Adding initial values to declared variables
• Removing 'declare' keyword mistakenly
• Using invalid keywords in declaration files

5. You want to write a declaration file for a JavaScript library that exports an object with keys as strings and values as functions returning numbers. Which is the correct declaration syntax in a .d.ts file?

hard

A. declare const lib: Map number>; export default lib;

B. declare const lib: { [key: string]: () => number }; export default lib;

C. declare const lib: { key: string; value: () => number }; export default lib;

D. const lib: { string: () => number }; export default lib;

Solution

1. Step 1: Understand the object shape needed

   The library exports an object where keys are strings and values are functions returning numbers.

2. Step 2: Match syntax for index signatures in declaration files

   declare const lib: { [key: string]: () => number }; export default lib; uses the correct index signature syntax { [key: string]: () => number } with declare and exports default.

3. Step 3: Eliminate incorrect options

   const lib: { string: () => number }; export default lib; lacks declare and uses invalid syntax, declare const lib: { key: string; value: () => number }; export default lib; incorrectly declares keys and values as properties, declare const lib: Map number>; export default lib; uses Map which is not specified.

4. Final Answer:

   declare const lib: { [key: string]: () => number }; export default lib; -> Option B

5. Quick Check:

   Use index signature with declare and export default [OK]

Hint: Use index signature {[key: string]: type} for dynamic keys [OK]

Common Mistakes:

• Using invalid object property syntax
• Omitting 'declare' keyword
• Confusing Map with plain object types