Write a generic TypeScript handler for mixed form inputs?

What's really being asked

This question tests whether you can use TypeScript narrowing to handle real DOM API differences without falling back to any. Interviewers want to see that you understand HTMLInputElement, HTMLSelectElement, and HTMLTextAreaElement have overlapping but not identical interfaces, and that you know how to refine a union type inside an event handler. It also reveals if you understand the difference between event target and currentTarget in the DOM.

The full answer

First, the candidate should type the event as a union, for example ChangeEvent of HTMLInputElement or HTMLSelectElement, or a generic E extending ChangeEvent of HTMLElement. Second, they should narrow the target using a type guard such as instanceof HTMLInputElement, checking element.tagName, or checking the element.type property. Third, they should branch on whether the element is a checkbox or radio button, reading .checked for those, and .value for text inputs, selects, and textareas. Fourth, a senior candidate might mention using a configuration map keyed by input name that encodes the expected type, keeping the handler generic while preserving type safety through a discriminated union or mapped type.

The mistakes people make

The biggest red flag is casting event.target to any or using a type assertion to HTMLInputElement on every branch. Another mistake is assuming all form elements have .value and reading it from a checkbox, which silently gives the string on instead of a boolean. Some candidates write separate handlers for every input and miss the point of the exercise entirely. Using unknown without a proper guard chain is slightly better but still weak if it ends in a blind type assertion.

What usually comes next

The interviewer might ask how you would type this in React versus vanilla DOM, or how to store the resulting state in a single object without losing type information. They might also ask how to make the handler work with a dynamic list of fields where each field has a different TypeScript type, which pushes toward generics, keyof, or mapped types. Another variant is asking how to handle custom components that forward refs and events.

A concrete example

Imagine a form with username as text, country as select, and subscribe as checkbox. The handler receives a ChangeEvent. You check if event.target instanceof HTMLInputElement. If true, you check if target.type equals checkbox. If so, you store target.checked as boolean. Otherwise you store target.value as string. If the target is an HTMLSelectElement, you store target.value as string. This keeps every branch type-safe and compiles without resorting to any.