Writing custom declaration files in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a module named 'myLib'.

Typescript

declare module [1] {
  export function greet(name: string): string;
}

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

A'library'

B'lib'

C'myLib'

D'myLibrary'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put the module name in quotes.

Using a different module name than 'myLib'.

The module name must be exactly 'myLib' as specified.

2fill in blank

medium

Complete the code to declare a variable 'version' of type string inside the module.

Typescript

declare module 'myLib' {
  export const [1]: string;
}

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

Aversion

Bver

Cv

DverNum

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than 'version'.

Putting the variable name in quotes.

The variable name must be 'version' as specified.

3fill in blank

hard

Fix the error in the declaration of a function 'add' that takes two numbers and returns a number.

Typescript

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

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

A=>

B=

C->

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Using '=>' instead of ':'.

Using '=' or '->' which are invalid here.

In TypeScript declaration files, the return type is specified with a colon ':'.

4fill in blank

hard

Fill both blanks to declare an interface 'User' with a string property 'name' and a number property 'age'.

Typescript

declare module 'myLib' {
  export interface [1] {
    name: string;
    [2]: number;
  }
}

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

AUser

Busername

Cage

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong interface or property names.

Confusing property names with variable names.

The interface name is 'User' and the number property is 'age'.

5fill in blank

hard

Fill both blanks to declare a namespace 'Utils' with a function 'log' that takes a string and returns void.

Typescript

declare namespace [1] {
  export function [2](message: string): void;
}

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

AUtils

Blog

C:

DLogger

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong namespace or function names.

Using '=>' instead of ':' for return type.

The namespace is 'Utils', function name is 'log', and return type uses ':'.

Practice

1. What is the main purpose of writing a custom declaration file in TypeScript?

easy

A. To tell TypeScript about types in JavaScript or untyped libraries

B. To write JavaScript code that runs faster

C. To convert TypeScript code into JavaScript

D. To create new JavaScript functions

Solution

1. Step 1: Understand the role of declaration files

   Declaration files provide type information about JavaScript code or libraries without types.

2. Step 2: Identify the purpose in TypeScript

   This helps TypeScript check code and improve editor support by knowing types.

3. Final Answer:

   To tell TypeScript about types in JavaScript or untyped libraries -> Option A

4. Quick Check:

   Custom declaration files = type info for JS [OK]

Hint: Declaration files describe types for untyped JS code [OK]

Common Mistakes:

• Thinking declaration files speed up code execution
• Confusing declaration files with code transpilation
• Believing declaration files create new functions

2. Which syntax correctly declares a module named 'my-lib' in a custom declaration file?

easy

A. module declare 'my-lib' { function foo(): void; }

B. declare module 'my-lib' { export function foo(): void; }

C. declare 'my-lib' module { export function foo(): void; }

D. module 'my-lib' declare { export function foo(): void; }

Solution

1. Step 1: Recall correct module declaration syntax

   TypeScript uses declare module 'name' { ... } to declare modules.

2. Step 2: Check each option's syntax

   Only declare module 'my-lib' { export function foo(): void; } uses the correct order and keywords.

3. Final Answer:

   declare module 'my-lib' { export function foo(): void; } -> Option B

4. Quick Check:

   Correct module syntax = declare module 'name' [OK]

Hint: Use 'declare module' followed by module name in quotes [OK]

Common Mistakes:

• Swapping 'declare' and 'module' keywords
• Omitting quotes around module name
• Using incorrect keyword order

3. Given this declaration file snippet:

declare module 'utils' {
  export function greet(name: string): string;
}

What is the correct TypeScript output for greet('Alice') if implemented as return `Hello, ${name}!`;?

medium

A. "Hello, Alice!"

B. Error: greet is not defined

C. greet(Alice)

D. Hello, Alice!

Solution

1. Step 1: Understand the declaration and implementation

   The declaration says greet takes a string and returns a string. The implementation returns a template string greeting.

2. Step 2: Evaluate the output of greet('Alice')

   Calling greet('Alice') returns the string Hello, Alice! without quotes in the output.

3. Final Answer:

   Hello, Alice! -> Option D

4. Quick Check:

   Function returns greeting string = Hello, Alice! [OK]

Hint: String return does not include quotes in output display [OK]

Common Mistakes:

• Including quotes around string output incorrectly
• Confusing function call with output text
• Assuming runtime error without implementation

4. Identify the error in this custom declaration file snippet:

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

medium

A. Missing semicolon after function declaration

B. Wrong module name syntax

C. Function parameters must be optional

D. Cannot export functions in declaration files

Solution

1. Step 1: Check syntax inside module declaration

   Each statement inside declaration files must end with a semicolon.

2. Step 2: Identify missing semicolon

   The function declaration line lacks a semicolon at the end.

3. Final Answer:

   Missing semicolon after function declaration -> Option A

4. Quick Check:

   Declaration statements need semicolons [OK]

Hint: Always end declarations with semicolons [OK]

Common Mistakes:

• Forgetting semicolons in declaration files
• Thinking exports are not allowed
• Misnaming modules with wrong quotes

5. You want to add a global type for a new property window.myAppVersion in a TypeScript project. Which custom declaration file snippet correctly adds this global property?

hard

A. declare module 'global' { interface Window { myAppVersion: string; } }

B. declare module 'window' { export const myAppVersion: string; }

C. declare global { interface Window { myAppVersion: string; } } export {};

D. interface Window { myAppVersion: string; }

Solution

1. Step 1: Understand how to add global types

   Use declare global block to augment global interfaces like Window.

2. Step 2: Check each option for correct syntax

   declare global { interface Window { myAppVersion: string; } } export {}; correctly declares global and extends Window interface, then exports empty to make it a module.

3. Final Answer:

   declare global { interface Window { myAppVersion: string; } } export {}; -> Option C

4. Quick Check:

   Global augmentation uses declare global + interface extension [OK]

Hint: Use 'declare global' to add global types safely [OK]

Common Mistakes:

• Trying to declare global types inside a module
• Omitting export {} to make file a module
• Declaring interface without 'declare global'