Top 30 TypeScript & Web APIs Concepts Quiz

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.

1. Question 1 of 30

   What is the main advantage of using type annotations in TypeScript?

   • aThey add runtime type validation checks to JavaScript applications.
   • bThey make the compiled JavaScript code execute faster.
   • cThey automatically convert variable types at runtime for compatibility.
   • dThey allow the TypeScript compiler to identify type errors during development.
   Show the answer

   Answer: d · They allow the TypeScript compiler to identify type errors during development.

   The card emphasizes that type annotations enable TypeScript to catch type mismatches during development, preventing bugs before runtime. They are erased during compilation and add no runtime overhead, meaning they do not perform runtime validation.

   Read the full bite: TypeScript Type Annotations: Defining Your Data's Shape

2. Question 2 of 30

   When would a TypeScript tuple be the most appropriate choice compared to an array?

   • aTo store a collection of user IDs, where the number of IDs can vary.
   • bTo hold a series of sensor readings over time.
   • cTo maintain a list of all available product categories.
   • dTo represent a single point in 2D space, like [x-coordinate, y-coordinate].
   Show the answer

   Answer: d · To represent a single point in 2D space, like [x-coordinate, y-coordinate].

   A tuple is ideal for fixed-length structures where the position and type of each element are important, such as a coordinate pair. An array is used for variable-length lists of elements of the same type, making options A, C, and D incorrect.

   Read the full bite: TypeScript's Basic Types: The Building Blocks

3. Question 3 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?

   • aTo prevent TypeScript from inferring an overly broad type like any[] for the array.
   • bTo allow the array to store any Animal subtype, not just the specific types present at initialization.
   • cTo ensure the array can only hold Rhino or Elephant instances, not other Animal types.
   • dTypeScript cannot infer types for arrays containing instances of custom classes.
   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

4. Question 4 of 30

   Before narrowing, what operations are permitted on a variable declared with a Union Type (e.g., string | number)?

   • aOnly operations that are common to both the string and number types.
   • bOperations determined by TypeScript's automatic runtime type inference.
   • cAny operation valid for either the string or number type.
   • dOnly operations that explicitly cast the variable to a specific type.
   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

5. Question 5 of 30

   When an object is assigned to a TypeScript interface, what happens if the object contains properties not defined in the interface?

   • aTypeScript will issue a compile-time error due to the exact shape mismatch.
   • bThe extra properties are ignored and effectively removed by the type checker.
   • cIt is only permitted if the interface explicitly marks those extra properties as optional.
   • dThe assignment is valid, provided all properties required by the interface are present.
   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

6. Question 6 of 30

   When should a TypeScript call signature be used instead of a function type expression?

   • aWhen defining a function type that can also be used as a class constructor.
   • bWhen you need to define a function type without explicitly naming its parameters.
   • cWhen the function's return type needs to be separated from its parameters using a colon (:) instead of an arrow (=>).
   • dWhen the function type needs to specify properties that the function itself possesses.
   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

7. Question 7 of 30

   When using the 'extends' property in tsconfig.json, how are compilerOptions and file-related properties handled?

   • acompilerOptions are completely replaced, while file-related properties are merged recursively.
   • bcompilerOptions are merged recursively, while file-related properties are completely replaced.
   • cBoth compilerOptions and file-related properties are merged recursively.
   • dBoth compilerOptions and file-related properties are completely replaced by the extending config.
   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

8. Question 8 of 30

   What is a key difference in how TypeScript's default numeric enums and string enums behave at runtime?

   • aNumeric enums are entirely removed during compilation, existing only for type-checking, while string enums persist as objects.
   • bBoth enum types compile down to simple primitive values (numbers or strings) without any additional runtime overhead or structure.
   • cString enums automatically assign sequential string values, whereas numeric enums require explicit value initialization.
   • dNumeric enums create a reverse mapping from their values back to their names, a feature not generated by string enums.
   Show the answer

   Answer: d · Numeric enums create a reverse mapping from their values back to their names, a feature not generated by string enums.

   The card states that numeric enums create a reverse mapping in the compiled JavaScript, allowing lookup of a member name by its value, a feature string enums do not have. Option B is incorrect because numeric enums do incur additional runtime overhead for this reverse mapping, unlike string enums which result in simpler compiled code.

   Read the full bite: TypeScript Enums: Named Constants for Clarity

9. Question 9 of 30

   For which use case are TypeScript literal types most effectively applied?

   • aStoring dynamic user-generated text from a form input.
   • bDefining a set of specific, allowed string values for a function parameter.
   • cCreating a type for a variable that will hold any valid URL string.
   • dEnsuring a variable's type remains broad enough to accept future, unknown string values.
   Show the answer

   Answer: b · Defining a set of specific, allowed string values for a function parameter.

   Literal types are designed to specify exact values, making them ideal for scenarios where a variable or parameter must accept one of a few predefined options, as described in option B. They are explicitly not for dynamic or broad values, which would make options A, C, and D incorrect.

   Read the full bite: Literal Types: Be More Specific Than `string`

10. Question 10 of 30

    What is the main drawback of adding your own variables and functions directly to the window object?

    • aIt can significantly increase the browser's memory consumption.
    • bIt increases the risk of naming conflicts and makes your code fragile.
    • cIt makes your code less secure by exposing internal implementation details.
    • dIt prevents the use of modern JavaScript module systems for organization.
    Show the answer

    Answer: b · It increases the risk of naming conflicts and makes your code fragile.

    The card states that adding variables directly to the window object "makes your code fragile and can lead to conflicts with third-party scripts." This 'global scope pollution' is the primary concern, not memory, security, or module prevention.

    Read the full bite: The `window` Object: Your Browser's Global Scope

11. Question 11 of 30

    Which task is NOT primarily handled by the `document` object in JavaScript?

    • aCreating a new HTML element to add to the page.
    • bModifying the style of an existing HTML element.
    • cLocating a specific element within the webpage's structure.
    • dRedirecting the browser to a different web address.
    Show the answer

    Answer: d · Redirecting the browser to a different web address.

    The `document` object is for interacting with the page's content and structure, such as modifying elements, creating new ones, or finding existing elements. Navigating to a new URL is a browser-level action handled by the `window.location` object, not the `document` object.

    Read the full bite: The `document` Object: Your Page's API

12. Question 12 of 30

    When JavaScript modifies an element using the DOM, what is the immediate and primary outcome?

    • aThe browser's visual rendering of the webpage is updated for the user.
    • bA new, modified HTML document is saved to the user's local file system.
    • cThe original HTML file on the web server is permanently altered.
    • dThe browser creates a backup of the previous DOM state for undo operations.
    Show the answer

    Answer: a · The browser's visual rendering of the webpage is updated for the user.

    The DOM is the browser's live, in-memory model of the webpage, so changes made via JavaScript directly update what the user sees. These changes do not affect the original HTML file on the server, which remains unchanged.

    Read the full bite: The DOM: Your HTML as a Live Object Tree

13. Question 13 of 30

    Which scenario is the most appropriate use case for sessionStorage?

    • aTemporarily saving progress on a multi-page form within a single browser tab.
    • bStoring a user's dark mode preference to apply on every future visit.
    • cKeeping a user's authentication token secure for the duration of their session.
    • dStoring a large catalog of product information for offline browsing.
    Show the answer

    Answer: a · Temporarily saving progress on a multi-page form within a single browser tab.

    sessionStorage is ideal for temporary data tied to a single tab, such as partially filled form data that should persist across page refreshes but not after the tab closes. Storing sensitive data like authentication tokens is explicitly advised against for any Web Storage, and large datasets are better handled by IndexedDB.

    Read the full bite: Web Storage API: Browser Key-Value Stores

14. Question 14 of 30

    Which scenario best illustrates why direct DOM manipulation is often avoided in favor of frontend frameworks for UI updates?

    • aWhen the application requires frequent and complex updates to many parts of the user interface.
    • bWhen a developer needs to change the text content of a single paragraph element.
    • cWhen the webpage is designed to be completely static with no interactive elements.
    • dWhen the JavaScript code needs to be executed before the HTML document is fully parsed by the browser.
    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

15. Question 15 of 30

    What is a key consideration when using nextSibling for DOM traversal?

    • aIt exclusively returns element nodes, ignoring text or comment nodes.
    • bIt requires the current element to possess a unique ID for proper function.
    • cIt can return a text node if whitespace exists between elements in the HTML.
    • dIt is primarily designed for navigating elements within the document's body.
    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.

    Read the full bite: DOM Traversal: Navigating the HTML Tree

16. Question 16 of 30

    What is the primary reason developers encounter cross-browser compatibility issues when using the Browser Object Model (BOM)?

    • aThe BOM is designed for server-side operations, not client-side browser interaction.
    • bThe BOM is an outdated technology, largely replaced by the more modern Document Object Model (DOM).
    • cThe BOM's security restrictions prevent consistent access to browser features across different origins.
    • dEach browser vendor implements the BOM differently, as it lacks a universal standard.
    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

17. Question 17 of 30

    Which scenario best describes a primary use case for configuring an event listener to operate during the capturing phase?

    • aTo handle an event on a parent element before it reaches and is processed by its nested child elements.
    • bTo listen for events that inherently do not support the bubbling phase, such as 'focus' or 'blur'.
    • cTo stop an event from propagating up the DOM tree once it has been handled by the target element.
    • dTo ensure the event handler on the specific target element is always the first to execute.
    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

18. Question 18 of 30

    Why does a callback scheduled with setTimeout(callback, 0) not execute immediately in JavaScript?

    • aThe browser enforces a minimum delay of at least 4ms for all setTimeout calls.
    • bThe event loop must wait for the Call Stack to be completely empty before processing any queued callbacks.
    • cThe callback is processed by a Web API on a different thread, causing a delay.
    • dsetTimeout is a low-priority function, so its callbacks are always deferred until all other operations are complete.
    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

19. Question 19 of 30

    What is the key benefit of requestAnimationFrame for animations over traditional timers like setTimeout?

    • aIt guarantees a consistent animation speed across all display refresh rates.
    • bIt allows animations to continue running efficiently even when the browser tab is in the background.
    • cIt ensures animation updates are synchronized with the browser's display repaint cycle.
    • dIt provides a simpler API for creating complex animation sequences without manual looping.
    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

20. Question 20 of 30

    How does the History API enable single-page applications to correctly respond when a user navigates with the browser's back or forward buttons?

    • aThe browser automatically re-renders the DOM based on the stateObject associated with the previous history entry.
    • bThe history.pushState() method stores a callback function that is executed when the user navigates back or forward.
    • cIt performs a partial page reload, fetching only the necessary content for the previous state from the server.
    • dIt triggers a popstate event on the window, allowing the application to retrieve the associated stateObject and update its view.
    Show the answer

    Answer: d · It triggers a popstate event on the window, allowing the application to retrieve the associated stateObject and update its view.

    When a user clicks back or forward, the browser fires a popstate event, which the application must listen for to retrieve the stateObject and render the appropriate view. The browser does not automatically re-render the DOM; the application is responsible for updating the UI.

    Read the full bite: History API: Change URLs Without Page Reloads

21. Question 21 of 30

    What is the primary role of TypeScript's `typeof` operator?

    • aTo ensure that a function's return value matches a predefined interface during execution.
    • bTo derive a static type from an existing value or variable for use in type declarations.
    • cTo dynamically generate new type definitions based on user input during application startup.
    • dTo inspect the type of a variable at runtime and return a string describing it.
    Show the answer

    Answer: b · To derive a static type from an existing value or variable for use in type declarations.

    TypeScript's `typeof` is a compile-time operator used to extract the static type of an existing value or variable, enabling type definitions to follow implementation. It is distinct from JavaScript's runtime `typeof`, which returns a string representation of a value's type.

    Read the full bite: TypeScript's `typeof`: Get a Type from a Value

22. Question 22 of 30

    What is the main purpose of a type guard in TypeScript?

    • aTo enable the TypeScript compiler to narrow a union type, allowing type-specific operations within a code block.
    • bTo automatically cast a variable to a more specific type before an operation is performed.
    • cTo define new, more precise types that can be used in place of broad union types.
    • dTo enforce type safety at runtime by throwing errors for type mismatches.
    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

23. Question 23 of 30

    For which scenario is a TypeScript index signature the most appropriate typing solution?

    • aAn object with a predefined, unchangeable set of properties, each with a specific type.
    • bA configuration object where some properties are known, but others are dynamic and their values share a common type.
    • cA data structure where each property's key and value type are unique and unrelated to others.
    • dAn API response where all properties are optional and their types vary widely.
    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

24. Question 24 of 30

    Given a type `Mapish = { [k: string]: boolean; }`, what type does `keyof Mapish` evaluate to?

    • astring
    • bnumber
    • cunknown
    • dstring | number
    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.

    Read the full bite: keyof: A Union Type of an Object's Keys

25. Question 25 of 30

    Which scenario best demonstrates the core benefit of using TypeScript Utility Types?

    • aDefining a new interface for a data model that has unique properties not found in other types.
    • bCreating a type for a database update operation that allows only a subset of an existing type's properties to be optional.
    • cAutomatically generating type definitions from a GraphQL schema during the build process.
    • dImplementing a function that validates an object's structure against a schema at runtime.
    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

26. Question 26 of 30

    Which scenario best illustrates the intended use of TypeScript's "never" type?

    • aGuaranteeing that all branches of a conditional type or switch statement are exhaustively covered.
    • bCreating a type that can safely hold any data, bypassing strict type checking.
    • cSpecifying that a function will execute completely but produce no observable return value.
    • dDefining a function that explicitly returns "undefined" when no meaningful value is available.
    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

27. Question 27 of 30

    What is the most significant problem that TypeScript Conditional Types are designed to solve in generic programming?

    • aSimplifying the declaration of fixed, non-generic type aliases for complex object structures.
    • bEnabling a single generic function to have a return type that adapts based on its input type, reducing the need for multiple overloads.
    • cPreventing runtime errors by strictly validating primitive type assignments.
    • dAllowing type definitions to be evaluated and changed at runtime based on data values.
    Show the answer

    Answer: b · Enabling a single generic function to have a return type that adapts based on its input type, reducing the need for multiple overloads.

    The card highlights that conditional types are used to model the relationship between input and output types, specifically to avoid an 'explosion of function overloads' by allowing a single generic function's return type to be dynamic. Option D is incorrect because conditional types are a compile-time construct, not a runtime mechanism for type changes.

    Read the full bite: Conditional Types: Ternary Logic for Your Types

28. Question 28 of 30

    What is the most significant advantage of using TypeScript template literal types?

    • aProgrammatically generating a finite set of related string literal types to enhance type safety.
    • bValidating complex string patterns in user input against predefined type structures.
    • cImproving the performance of string operations by pre-calculating string combinations.
    • dCreating dynamic string values at runtime based on compile-time type definitions.
    Show the answer

    Answer: a · Programmatically generating a finite set of related string literal types to enhance type safety.

    Template literal types are designed to programmatically create new string literal types at compile time, ensuring type safety for related string patterns like event names or i18n keys. They do not create dynamic string values at runtime; that's a JavaScript feature.

    Read the full bite: TypeScript: Build New String Types with Template Literals

29. Question 29 of 30

    What is the primary reason to explicitly declare a function's return type in TypeScript, rather than letting it be inferred?

    • aTo enable TypeScript to automatically cast the return value to the expected type if there's a mismatch.
    • bTo improve the runtime performance of the function by providing the compiler with more information.
    • cTo ensure the function's output type remains predictable and stable, even if its implementation details evolve.
    • dTo allow the function to accept a wider range of input types while maintaining type safety.
    Show the answer

    Answer: c · To ensure the function's output type remains predictable and stable, even if its implementation details evolve.

    Explicitly declaring the return type acts as a contract, ensuring that if the function's internal logic changes, TypeScript will flag an error if the new logic produces a different type than declared. This prevents subtle bugs that inference might otherwise miss. TypeScript performs static type checking at compile-time and does not automatically cast or convert types at runtime to fix mismatches; it will report a compile-time error instead.

    Read the full bite: TypeScript: Typing Function Inputs and Outputs

30. Question 30 of 30

    According to the card, what is the "main footgun" that TypeScript's strict mode will flag as an error when defining a class?

    • aDeclaring a class property as readonly without providing an initial value.
    • bForgetting to initialize a class property within the constructor or with a default value.
    • cDefining a class method without explicitly specifying its return type.
    • dCreating a class instance without using the new keyword.
    Show the answer

    Answer: b · Forgetting to initialize a class property within the constructor or with a default value.

    The card explicitly states, "The main footgun is forgetting to initialize properties, which strict mode flags as an error," directly referring to the strictPropertyInitialization rule. While declaring a readonly property without an initial value would also be an error, the card highlights the general issue of uninitialized properties as the "main footgun."

    Read the full bite: TypeScript Classes: Blueprints for Typed Objects