Top 30 Intermediate TypeScript & Web APIs Concepts Quiz
30 intermediate multiple-choice TypeScript & Web APIs concept questions, the mechanics underneath the basics: how the pieces relate and where the usual mental model stops holding. They come from 30 bites in the TypeScript & Web APIs library, the middle slice of the 113 TypeScript & Web APIs concept questions in the library. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
TypeScript, browser APIs, WebAssembly, PWAs
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
Why might you explicitly annotate the type of an array like "let items: Animal[] = [new Rhino(), new Elephant()];" instead of letting TypeScript infer it?
Show the answer
Answer: b · To allow the array to store any Animal subtype, not just the specific types present at initialization.
The card explains that TypeScript infers a 'best common type' like (Rhino | Elephant)[] for such an array. Explicitly annotating as Animal[] allows the array to hold any Animal subtype, which is a more general type than the inferred union. Option C is incorrect because the inferred type would already restrict it to Rhino or Elephant, while explicit annotation to Animal[] broadens it.
Read the full bite: TypeScript Type Inference: How It Knows Without Being Told
Question 2 of 30
Before narrowing, what operations are permitted on a variable declared with a Union Type (e.g., string | number)?
Show the answer
Answer: a · Only operations that are common to both the string and number types.
The card states, "When you have a value of this union type, TypeScript only allows you to perform operations that are valid for every member type." This means you can only use properties or methods common to all types in the union until you explicitly narrow the type using runtime checks. Option C is incorrect because TypeScript prevents operations specific to one type (e.g., string methods on a string | number) without narrowing, as the value might be the other type.
Read the full bite: Union Types: When a Value Can Be One of Several Things
Question 3 of 30
When an object is assigned to a TypeScript interface, what happens if the object contains properties not defined in the interface?
Show the answer
Answer: d · The assignment is valid, provided all properties required by the interface are present.
TypeScript interfaces use structural typing, meaning an object only needs to have the properties specified by the interface to be considered compatible. Extra properties are allowed and do not cause a type error, as long as the required contract is fulfilled. Option A is incorrect because TypeScript does not enforce an exact match; it only checks for the presence of required properties.
Read the full bite: TypeScript Interfaces: Naming the Shape of Your Data
Question 4 of 30
When should a TypeScript call signature be used instead of a function type expression?
Show the answer
Answer: d · When the function type needs to specify properties that the function itself possesses.
The card states that a call signature is used "for describing a value that is callable but also has its own properties." Function type expressions are for simple callbacks without properties. Option C describes a syntactic difference, not the functional reason for choosing one over the other.
Read the full bite: TypeScript Function Types: Expressions vs. Signatures
Question 5 of 30
When using the 'extends' property in tsconfig.json, how are compilerOptions and file-related properties handled?
Show the answer
Answer: b · compilerOptions are merged recursively, while file-related properties are completely replaced.
The card states that "compilerOptions are merged recursively, but file-related properties like include are completely replaced, not combined." This means that an extending configuration will add to or override specific compiler options, but its file-related arrays will entirely supersede those from the base configuration. Option C is a common misconception, as it incorrectly assumes all properties are merged.
Read the full bite: tsconfig.json: The Rulebook for Your TypeScript Project
Question 6 of 30
Which scenario best illustrates why direct DOM manipulation is often avoided in favor of frontend frameworks for UI updates?
Show the answer
Answer: a · When the application requires frequent and complex updates to many parts of the user interface.
The card explicitly states that direct, frequent DOM manipulation is computationally expensive due to browser reflows and repaints, making it unsuitable for complex applications with many state changes. Frameworks like React and Vue were developed to address this performance issue. Option B describes a simple, infrequent update where direct DOM manipulation is appropriate, not avoided.
Read the full bite: DOM Manipulation: Treating Your Webpage Like a Live Object
Question 7 of 30
What is a key consideration when using nextSibling for DOM traversal?
Show the answer
Answer: c · It can return a text node if whitespace exists between elements in the HTML.
The card explicitly states that nextSibling can return a text node (representing whitespace) if there is whitespace between elements in the HTML source, calling this a 'classic footgun.' Option A is a common misconception; nextSibling operates on all node types, not just element nodes.
Question 8 of 30
What is the primary reason developers encounter cross-browser compatibility issues when using the Browser Object Model (BOM)?
Show the answer
Answer: d · Each browser vendor implements the BOM differently, as it lacks a universal standard.
The card explicitly states that the BOM is a collection of non-standard APIs whose implementation is 'up to each vendor,' leading to significant differences and compatibility issues across browsers. Option D directly captures this core problem. Option C is incorrect because the card identifies the lack of standardization, not security restrictions, as the primary cause of BOM's cross-browser inconsistency.
Read the full bite: Browser Object Model: The Browser's Unruly API
Question 9 of 30
Which scenario best describes a primary use case for configuring an event listener to operate during the capturing phase?
Show the answer
Answer: a · To handle an event on a parent element before it reaches and is processed by its nested child elements.
The capturing phase allows an event listener on an ancestor element to intercept and handle an event as it travels down the DOM tree before it reaches the target element. Option D describes the bubbling phase's behavior relative to the target, not capturing.
Read the full bite: Event Bubbling vs. Capturing: The DOM's Two-Way Street
Question 10 of 30
Why does a callback scheduled with setTimeout(callback, 0) not execute immediately in JavaScript?
Show the answer
Answer: b · The event loop must wait for the Call Stack to be completely empty before processing any queued callbacks.
The event loop's fundamental rule is to move tasks from the Job Queue to the Call Stack only when the Call Stack is empty, ensuring all current synchronous code finishes first. Option A, while sometimes true due to browser optimizations, is not the core reason for the ordering behavior described by the event loop.
Read the full bite: The JavaScript Event Loop: Asynchronicity on a Single Thread
Question 11 of 30
What is the key benefit of requestAnimationFrame for animations over traditional timers like setTimeout?
Show the answer
Answer: c · It ensures animation updates are synchronized with the browser's display repaint cycle.
The primary advantage of requestAnimationFrame is its synchronization with the browser's repaint cycle, preventing dropped frames and wasted work. Option A is incorrect because achieving consistent speed across refresh rates requires manual calculation using the provided timestamp, not an automatic guarantee.
Read the full bite: Smooth Animations with requestAnimationFrame
Question 12 of 30
What is the main purpose of a type guard in TypeScript?
Show the answer
Answer: a · To enable the TypeScript compiler to narrow a union type, allowing type-specific operations within a code block.
Type guards are runtime checks that inform the TypeScript compiler, allowing it to 'narrow' a union type and safely permit operations specific to one of the types. While they involve runtime checks, their primary benefit is compile-time type safety, not throwing runtime errors for type mismatches, as TypeScript types are erased at runtime.
Read the full bite: TypeScript: How Type Guards Narrow Union Types
Question 13 of 30
For which scenario is a TypeScript index signature the most appropriate typing solution?
Show the answer
Answer: b · A configuration object where some properties are known, but others are dynamic and their values share a common type.
Index signatures are ideal for objects with dynamic property names where the values conform to a single type or a union of types, as exemplified by the AppConfig example. For cases where different keys require entirely distinct value types, mapped types or unions of objects are more appropriate.
Read the full bite: TypeScript Index Signatures: Typing Dynamic Keys
Question 14 of 30
Given a type `Mapish = { [k: string]: boolean; }`, what type does `keyof Mapish` evaluate to?
Show the answer
Answer: d · string | number
The card explicitly states that for a string index signature like `{ [k: string]: boolean; }`, `keyof Mapish` evaluates to `string | number`. This is due to JavaScript's runtime behavior where numeric keys are coerced to strings, which TypeScript reflects for safety. Simply `string` would be incorrect as it omits the numeric access possibility.
Question 15 of 30
Which scenario best demonstrates the core benefit of using TypeScript Utility Types?
Show the answer
Answer: b · Creating a type for a database update operation that allows only a subset of an existing type's properties to be optional.
Utility types are specifically designed to create variations of existing types, such as making properties optional for partial updates, which avoids repetitive manual type definitions. They are not for defining entirely new type structures or for runtime validation.
Read the full bite: TypeScript Utility Types: Don't Reinvent the Type
Question 16 of 30
Which scenario best illustrates the intended use of TypeScript's "never" type?
Show the answer
Answer: a · Guaranteeing that all branches of a conditional type or switch statement are exhaustively covered.
The "never" type is primarily used for exhaustive checking, ensuring all possible cases in a type union are handled, as stated in the card. Option C describes the "void" type, which indicates a function completes execution but returns nothing, a common point of confusion with "never".
Read the full bite: The `never` Type: A Value That Should Never Exist
Question 17 of 30
Which access modifier allows a class member to be accessed by its own class and any derived classes, but not by external instances?
Show the answer
Answer: b · protected
The "protected" modifier ensures that a member is accessible within its own class and by any classes that extend it, but remains hidden from external code. "private" members, however, are strictly confined to the declaring class itself, preventing access even by subclasses.
Question 18 of 30
What is the primary reason an HTMLInputElement object can both addEventListener() and access its id property?
Show the answer
Answer: a · It inherits addEventListener from EventTarget and id from Element in its prototype chain.
The card explains that an HTMLInputElement object gains addEventListener from its EventTarget ancestor and the id property from its Element ancestor through the inheritance chain. It does not directly implement or have these functionalities injected.
Read the full bite: The DOM's Inheritance Chain: EventTarget > Node > Element
Question 19 of 30
If you accidentally type "clik" instead of "click" when adding an event listener to a button in TypeScript, what is the most likely outcome?
Show the answer
Answer: b · The TypeScript compiler will report an error, preventing compilation.
The card explicitly states that a typo like "clik" in TypeScript "won't compile," highlighting that the error is caught at the compilation stage, not at runtime. Option A describes the behavior in plain JavaScript, which is the problem strongly-typed event listeners aim to solve by moving error detection to compile time.
Read the full bite: Strongly-Typed Event Listeners in TypeScript
Question 20 of 30
Why does TypeScript require a type guard when iterating a NodeList from querySelectorAll but not an HTMLCollection?
Show the answer
Answer: a · NodeList can include various node types like text or comments, so TypeScript requires a check before accessing element-specific properties.
The card explains that NodeList can contain any Node type (elements, text, comments), so TypeScript requires a type guard to ensure safe access to element-specific properties. In contrast, HTMLCollection is guaranteed to contain only Elements, allowing direct access to their properties without an explicit check.
Read the full bite: Typing NodeList vs. HTMLCollection in TypeScript
Question 21 of 30
What is the main challenge when retrieving values from a FormData object using get() in TypeScript?
Show the answer
Answer: d · It returns a union type of 'string | File | null', necessitating explicit type validation.
The card explicitly states that formData.get() returns a union type of 'string | File | null', meaning developers must perform type checks before safely using the retrieved value. It does not return 'any', always a 'string', or automatically infer types from HTML.
Read the full bite: The FormData API: From HTML Forms to Typed Objects
Question 22 of 30
According to the card, what is the primary and most appropriate use case for the Promise constructor (new Promise(...))?
Show the answer
Answer: d · To transform an existing asynchronous function that uses callbacks into a promise-based one.
The card states the Promise constructor's purpose is to "bridge this gap, allowing developers to wrap old, callback-based APIs" and is the "primary tool for 'promisifying' legacy code." Option A describes an anti-pattern explicitly warned against in the card.
Read the full bite: The Promise Constructor: Wrapping Old Callbacks
Question 23 of 30
What is the primary advantage of using TypeScript generics?
Show the answer
Answer: c · It enables the creation of reusable components that maintain type safety across different data types.
Generics are designed to create components that are both reusable across various data types and type-safe, ensuring type information flows from input to output. Option B describes the 'any' type, which sacrifices type safety, while generics preserve it.
Read the full bite: TypeScript Generics: Writing Functions That Adapt to Types
Question 24 of 30
When using the native fetch API in TypeScript, how do you correctly apply type safety to the JSON data received from an API?
Show the answer
Answer: c · By performing a type assertion on the result of await response.json().
The card explains that `response.json()` returns `Promise<any>`, so you must explicitly assert the type of the parsed data using `as MyType`. Adding a generic type to the `fetch` call itself is a common mistake and has no effect, and the `Response` object does not automatically infer the JSON payload's type.
Question 25 of 30
What is the primary benefit of using the Headers object when working with HTTP headers in web applications?
Show the answer
Answer: d · It automatically enforces HTTP header formatting rules, such as case-insensitivity and preventing forbidden headers.
The Headers object's main advantage is its automatic handling of HTTP header rules, including case-insensitivity and preventing forbidden headers, as stated in the card. It abstracts away raw string manipulation for safety, rather than enabling it, and does not handle encryption or enforce uppercase conversion.
Read the full bite: The Headers Object: A Safer Way to Manage HTTP Headers
Question 26 of 30
In a TypeScript self-typing fetch wrapper, what is the key function of the `infer` keyword?
Show the answer
Answer: a · To extract specific request and response types from a comprehensive API schema based on generic path and method arguments.
The `infer` keyword, used within conditional types, allows TypeScript to extract and derive specific request and response types from a larger, predefined API schema based on the generic arguments provided to the fetch wrapper. Option C is incorrect because `infer` consumes an existing schema to derive types, it does not generate the schema itself.
Read the full bite: TypeScript `infer`: Create a Self-Typing Fetch Wrapper
Question 27 of 30
What is the primary benefit URLSearchParams offers to web developers?
Show the answer
Answer: a · It provides a standardized and safe way to handle URL query strings, including encoding and decoding.
The card states URLSearchParams provides a "standardized, safe, and convenient way to handle this common task" of parsing and building query strings, and that "It handles all the tricky encoding and formatting details for you." Option C is incorrect because storing sensitive data like authentication tokens directly in the URL is generally insecure, even with URLSearchParams. While URLSearchParams can be used with the History API for client-side routing (Option D), it does not enable routing itself; it only manages the query part of the URL. Option B is incorrect as it explicitly states not to use it for other URL components like path or hash fragment.
Read the full bite: URLSearchParams: Safely Build and Parse URL Queries
Question 28 of 30
In which situation would using AbortController be most appropriate?
Show the answer
Answer: c · Implementing a type-ahead search where only the latest query's results are relevant.
The card explicitly states AbortController is ideal for implementing type-ahead search, where previous requests are cancelled as the user types. It advises against using it for critical, fire-and-forget operations that must complete, like a payment submission, as cancellation would prevent their completion.
Read the full bite: AbortController: Cancel In-Flight Web Requests
Question 29 of 30
Which mapped type modifier syntax makes all properties of a type required?
Show the answer
Answer: b · [P in keyof T]-?: T[P]
The `-?` syntax explicitly removes the optional modifier from a property, making it required. Option A, `+?`, would add or retain optionality, which is the opposite of making properties required.
Read the full bite: TypeScript: Modify Properties with Mapped Type Modifiers
Question 30 of 30
Consider the expression `config?.settings?.theme`. If `config` is `null`, what is the final result of this expression?
Show the answer
Answer: a · The entire expression evaluates to `undefined`.
Optional chaining (`?.`) short-circuits immediately if the value to its left is `null` or `undefined`. In this case, since `config` is `null`, `config?.settings` evaluates to `undefined`, and the rest of the chain (`.theme`) is not executed. Option C is incorrect because `?.` specifically prevents `TypeError` for `null` or `undefined` values.
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.