Ambient declarations in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this ambient declaration usage?

Consider the following TypeScript code using an ambient declaration. What will be the output when running the compiled JavaScript?

Typescript

declare const greeting: string;
console.log(greeting);

A ReferenceError: greeting is not defined

B undefined

C The string value of greeting if defined globally

D Compilation error due to missing initialization

💡 Hint

Ambient declarations tell TypeScript about variables that exist elsewhere but do not create them.

The declare keyword only tells TypeScript that a variable exists. It does not create the variable in JavaScript. So at runtime, if greeting is not defined globally, it causes a ReferenceError.

🧠 Conceptual

intermediate

What is the purpose of ambient declarations in TypeScript?

Why do developers use ambient declarations in TypeScript?

A To enforce strict typing on all variables in the project

B To create new variables with initial values in TypeScript files

C To declare variables or types that exist in the global scope or external scripts without defining them

D To automatically import external modules into the project

💡 Hint

Think about how TypeScript knows about variables from other scripts or libraries.

Ambient declarations let TypeScript know about variables, functions, or types that are defined elsewhere (like in a JavaScript library) so it can type-check code that uses them.

❓ Predict Output

advanced

What error does this ambient module declaration cause?

Examine this TypeScript code snippet. What error will it produce?

Typescript

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

import { greet } from 'myLib';
console.log(greet(123));

A No error, outputs '123'.

B Cannot find module 'myLib'.

C Runtime error: greet is not a function.

D Type 'number' is not assignable to type 'string'.

💡 Hint

Check the argument type passed to the function versus the declared type.

The ambient declaration says greet expects a string argument. Passing a number (123) causes a type error during compilation.

🔧 Debug

advanced

Why does this ambient variable cause a runtime error?

Given this ambient declaration and usage, why does the code fail at runtime?

Typescript

declare var config: { apiKey: string };
console.log(config.apiKey);

A Because <code>config</code> is declared but not defined anywhere in JavaScript at runtime

B Because <code>apiKey</code> is not a string

C Because <code>declare var</code> cannot be used with objects

D Because TypeScript does not allow accessing properties on ambient variables

💡 Hint

Ambient declarations do not create variables in the output JavaScript.

The declare var tells TypeScript the variable exists but does not create it. If config is not defined in the actual JavaScript environment, accessing config.apiKey causes a runtime error.

🚀 Application

expert

How many properties does the ambient interface add to the global Window object?

Given this ambient declaration extending the global Window interface, how many new properties are added to window?

Typescript

declare global {
  interface Window {
    appVersion: string;
    isLoggedIn: boolean;
    logout(): void;
  }
}

console.log(Object.keys(window).includes('appVersion'));

A 3 properties: <code>appVersion</code>, <code>isLoggedIn</code>, and <code>logout</code>

B 0 properties, because ambient declarations do not add properties at runtime

C 1 property: <code>appVersion</code> only

D 2 properties: <code>appVersion</code> and <code>isLoggedIn</code> only

💡 Hint

Ambient declarations describe types but do not create actual properties in JavaScript.

Ambient declarations extend TypeScript's type system but do not add properties to objects at runtime. So window does not have these properties unless they are set elsewhere.