🌐 Frontend Dev

How do you type a custom property on global window in TypeScript?

Tests declaration merging and global scope augmentation in TypeScript. Strong answer: declare global in a .ts file, a .d.ts with interface Window, or scoped declare const window. Red flag: any or ts-ignore instead of interface merging.

How do you globally add a property to a third-party ButtonProps interface?

Tests TypeScript declaration merging and module augmentation. A strong answer uses a .d.ts file that declares the same module and interface name to merge the missing property globally. Red flag: suggesting edits inside node_modules or local wrapper types.

How do you write a minimal dom-utils.d.ts for a JS function?

Tests bridging untyped JavaScript into TypeScript via ambient module declarations. A strong answer declares a module matching the file path and exports the function with a typed signature. Red flag: suggesting rename to .ts or using any.

How do you add TypeScript types for a library without bundled types?

This tests the DefinitelyTyped @types workflow. Install @types/package as a dev dependency via npm or yarn, skipping it when the library already bundles .d.ts files. A red flag is suggesting manual declarations or extra tooling before checking DefinitelyTyped.

Explain TypeScript Project References in a monorepo and their configuration

This tests monorepo build scaling. Good answers: split into composite projects with references arrays, use tsc --build for incremental compilation, and consume .d.ts outputs for boundaries. Red flag: calling it path mapping or omitting --build.

How do you configure a dual ESM/CommonJS package?

Use exports.require for .cjs and exports.import for .mjs, keep type unset or explicit, and compile separate artifacts.

How would you structure TypeScript code and exports for effective tree-shaking?

Tests ES module semantics and sideEffects for library authors. Great answers: emit ESM, set sideEffects:false, avoid stateful barrel files, and preserve import syntax. Red flag: saying ESM alone guarantees tree-shaking without mentioning side effects.

How do modern build tools handle TypeScript vs tsc?

Separating transpilation from type checking for speed. Great answer: fast native tooling strips TS per-file on demand via native ESM; browser loads only visited modules; tsc/ts-loader check/bundle the whole graph upfront.

What problem does esModuleInterop solve for CommonJS imports?

Tests CommonJS-to-ESM interop. A strong answer covers: default imports for CommonJS modules; runtime helpers checking __esModule and wrapping exports; and implicit allowSyntheticDefaultImports. Red flag: claiming it is purely type-level with no emit impact.

How would you use tsconfig.json to enable shorter path aliases?

This tests TypeScript module resolution. A strong answer sets compilerOptions.baseUrl, maps paths like @/* to src/*, and warns bundlers need matching aliases. A red flag is omitting baseUrl or claiming paths alone changes runtime resolution.

What is tsconfig strict, and which sub-flag to relax for legacy?

Tests strict as a master switch and migration pragmatism. Strong answers name strictNullChecks or noImplicitAny as the first to relax in legacy code, trading null-safety for fewer errors. Red flag: disabling strict entirely instead of a targeted sub-flag.

In WebGL, what is the difference between attributes and uniforms?

Tests per-vertex versus per-draw-call data flow. Attributes vary per vertex from buffers; uniforms are constant per draw call. Cite vertex positions as attributes and an MVP matrix as uniform.

Use MediaRecorder to capture a canvas stream and download as WebM

Tests MediaRecorder lifecycle and blob assembly. Answer: canvas.captureStream() into new MediaRecorder with video/webm, start(), collect chunks via dataavailable, stop(), then build a Blob and object URL for download.

Explain the roles of vertex and fragment shaders in WebGL

Vertex shaders write gl_Position per vertex; fragment shaders write gl_FragColor per pixel.

Which video event signals completion, and how do you track playback time?

Tests HTMLMediaElement events and UI performance. Answer: use ended for replay; read currentTime on timeupdate but throttle updates or use requestAnimationFrame. Red flag: setInterval polling, currentTime===duration checks, or unthrottled state writes.

How do you create a smooth Canvas 2D loop with requestAnimationFrame?

Tests render pipeline timing. Outline: queue rAF per refresh; derive delta from timestamp for frame-rate independence; recurse each frame; cancel via cancelAnimationFrame. Red flag: claiming rAF locks 60fps, ignoring timestamp, or setInterval is fine.

Write a TypeScript async/await function that requests webcam access and handles errors

This tests async/await error handling for getUserMedia and stream attachment. A good answer uses try/catch, sets video.srcObject, and branches on NotAllowedError and NotFoundError. A red flag is omitting catch or using src instead of srcObject.

Get canvas 2D context and draw a filled circle

This tests Canvas API coordinates and context acquisition. A strong answer selects the canvas, calls getContext("2d"), uses path functions for circles, sets color style, and fills. A red flag is ignoring the top-left origin or using SVG instead.

How do you programmatically play, pause, and dynamically set a video source?

Your grasp of HTMLMediaElement's imperative API and the play() Promise. Query the video, attach play() and pause() to buttons, and set src or swap source children then call load(). Treating play() as synchronous or changing src without load().