Why declaration files are needed in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a JavaScript module with TypeScript support.

Typescript

import [1] from './mathLib';

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

Aadd

Bfunction

Cnumber

Dinterface

Attempts:

3 left

💡 Hint

Common Mistakes

Using TypeScript keywords like 'interface' or 'number' instead of the actual function name.

We import the function named add from the JavaScript module to use it in TypeScript.

2fill in blank

medium

Complete the declaration file to describe the function's type.

Typescript

export declare function add(a: number, b: number): [1];

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

Anumber

Bvoid

Cboolean

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'string' or 'void' as the return type.

The add function returns a number because it sums two numbers.

3fill in blank

hard

Fix the error by completing the declaration file for a JavaScript module without types.

Typescript

declare module '[1]' { export function add(a: number, b: number): number; }

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

Autils

BmathLib

Cfs

Dhttp

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated module names like 'fs' or 'http'.

The declaration file must match the module name mathLib to provide types for it.

4fill in blank

hard

Fill both blanks to create a declaration file that describes a variable and a function.

Typescript

export declare const version: [1];
export declare function greet(name: string): [2];

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

Astring

Bnumber

Cvoid

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using number for version or boolean for greet's return type.

The version is a string, and greet returns nothing, so its return type is void.

5fill in blank

hard

Fill all three blanks to write a declaration file for an object with properties and a method.

Typescript

export interface User {
  id: [1];
  name: [2];
  isActive(): [3];
}

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

Anumber

Bstring

Cboolean

Dvoid

Attempts:

3 left

💡 Hint

Common Mistakes

Using void for isActive or string for id.

User's id is a number, name is a string, and isActive returns a boolean indicating status.