Ambient declarations in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an ambient variable named myVar of type string.

Typescript

declare var [1]: string;

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

AvarName

BmyVariable

CmyVar

Dvariable

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than myVar.

Trying to assign a value instead of declaring.

The declare var syntax is used to declare an ambient variable. Here, myVar is the variable name.

2fill in blank

medium

Complete the code to declare an ambient function named greet that takes a name parameter of type string and returns void.

Typescript

declare function [1](name: string): void;

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

Agreet

BsayHello

Chello

Dwelcome

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different function name.

Adding a function body instead of just declaring.

The ambient function declaration uses declare function followed by the function name. Here, the function name is greet.

3fill in blank

hard

Fix the error in the ambient declaration by completing the code to declare a constant named PI of type number.

Typescript

declare const [1]: number;

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

ApiValue

BPI

Cpi

DPi

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or mixed case names.

Trying to assign a value in ambient declarations.

Ambient constants are declared with declare const. The name must match exactly PI (case-sensitive).

4fill in blank

hard

Fill both blanks to declare an ambient namespace named Utils with a function log that takes a message string and returns void.

Typescript

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

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

AUtils

BLogger

Clog

Dprint

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong namespace or function names.

Trying to add function bodies inside ambient declarations.

The ambient namespace is declared with declare namespace Utils. Inside it, the function log is declared.

5fill in blank

hard

Fill all three blanks to declare an ambient interface named Person with a name property of type string and an optional age property of type number.

Typescript

declare interface [1] {
  [2]: string;
  [3]?: number;
}

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

APerson

Bname

Cage

DUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong interface or property names.

Missing the optional property marker ?.

The ambient interface is declared with declare interface Person. It has a required name property and an optional age property.

Practice

1. What is the main purpose of an ambient declaration in TypeScript?

easy

A. To tell TypeScript about code that exists elsewhere without generating JavaScript

B. To create new variables that TypeScript will compile into JavaScript

C. To define functions that run only during development

D. To import modules from npm packages automatically

Solution

1. Step 1: Understand what ambient declarations do

   Ambient declarations use the declare keyword to describe code that is already present, like global variables or external libraries.

2. Step 2: Recognize that ambient declarations do not produce JavaScript

   They only help TypeScript check types and do not generate any JavaScript code.

3. Final Answer:

   To tell TypeScript about code that exists elsewhere without generating JavaScript -> Option A

4. Quick Check:

   Ambient declarations = describe external code [OK]

Hint: Remember: declare means 'exists elsewhere' in TypeScript [OK]

Common Mistakes:

• Thinking declare creates new code in output
• Confusing ambient declarations with imports
• Assuming declare runs code at runtime

2. Which of the following is the correct syntax for declaring an ambient variable named API_KEY of type string?

easy

A. let API_KEY: string = '123';

B. var API_KEY: string;

C. declare var API_KEY: string;

D. const API_KEY = '123';

Solution

1. Step 1: Identify ambient declaration syntax

   Ambient declarations use the declare keyword before the variable declaration to tell TypeScript it exists elsewhere.

2. Step 2: Check the options for correct usage

   declare var API_KEY: string; uses declare var API_KEY: string; which is the correct ambient declaration syntax without initialization.

3. Final Answer:

   declare var API_KEY: string; -> Option C

4. Quick Check:

   Ambient var declaration = declare var [OK]

Hint: Ambient vars always use 'declare' without initialization [OK]

Common Mistakes:

• Initializing variables in ambient declarations
• Omitting the declare keyword
• Using let or const with declare incorrectly

3. Given the ambient declaration below, what will be the output of the following code?

declare function greet(name: string): void;
greet('Alice');

medium

A. Hello, Alice!

B. No output, because greet is only declared

C. TypeScript compile error

D. Error: greet is not defined

Solution

1. Step 1: Understand what declare does for functions

   The declare keyword tells TypeScript that the function greet exists elsewhere, but it does not provide an implementation.

2. Step 2: Consider runtime behavior

   Since no actual JavaScript function greet is defined, calling greet('Alice') will cause a runtime error: greet is not defined.

3. Final Answer:

   Error: greet is not defined -> Option D

4. Quick Check:

   declare function = no runtime code [OK]

Hint: declare only types, no runtime code created [OK]

Common Mistakes:

• Assuming declare creates function implementation
• Expecting output without defining function
• Confusing compile-time and runtime behavior

4. Identify the error in this ambient declaration and fix it:

declare const version = '1.0.0';

medium

A. Ambient declarations cannot have initializers; remove '= '1.0.0''

B. Change 'const' to 'let' to allow initialization

C. Add type annotation: declare const version: string = '1.0.0';

D. No error; code is correct

Solution

1. Step 1: Recall ambient declaration rules for variables

   Ambient declarations cannot include initializers because they only describe existing code.

2. Step 2: Fix the code by removing the initializer

   Remove the = '1.0.0' part, leaving declare const version: string; to fix the error.

3. Final Answer:

   Ambient declarations cannot have initializers; remove '= '1.0.0'' -> Option A

4. Quick Check:

   No initializers in declare vars [OK]

Hint: No value assignments in declare statements [OK]

Common Mistakes:

• Adding initial values in declare statements
• Changing const to let without removing initializer
• Ignoring type annotations in ambient declarations

5. You want to use a global JavaScript library that defines a global variable Lib with a method init(). How should you write an ambient declaration to use it safely in TypeScript?

hard

A. const Lib = { init(): void {} };

B. declare const Lib: { init(): void; };

C. declare function Lib(): void;

D. interface Lib { init(): void; }

Solution

1. Step 1: Understand the global variable structure

   The global variable Lib is an object with a method init(), so it should be declared as a constant with a method signature.

2. Step 2: Write the correct ambient declaration

   Use declare const Lib: { init(): void; }; to tell TypeScript about the existing global object and its method without implementation.

3. Final Answer:

   declare const Lib: { init(): void; }; -> Option B

4. Quick Check:

   Declare global object with method signatures [OK]

Hint: Use declare const with method signatures for global objects [OK]

Common Mistakes:

• Using interface instead of declare const for global vars
• Declaring Lib as a function instead of an object
• Defining implementation inside ambient declarations