The FormData API: From HTML Forms to Typed Objects
FormData serializes an HTML form into key/value pairs for fetch. In TypeScript, its main footgun is that get() returns a generic string | File | null, requiring you to validate and cast the data before using it safely.
Why it exists
Before FormData, developers had to manually select every form input, get its value, and build a request body piece by piece. This was tedious and error-prone, especially with file uploads. FormData was created to automate this entire process with a single object.
The mental model
Think of FormData as a dedicated assistant for your HTML forms. You point it at a <form> element, and it runs around, collects the name and value from every input, checkbox, and file selector, and puts them into a single, organized package ready for fetch. It handles the complex multipart/form-data encoding for you, which is essential for file uploads.
How it works
You create a new FormData instance, optionally passing an HTML <form> element to its constructor to pre-populate it. You can then use methods like append(), set(), and delete() to manipulate the data. The real power is passing this FormData object directly as the body of a fetch request; the browser sets the correct Content-Type header and formats the body automatically.
When to use it
Use FormData whenever you need to submit data from a standard HTML <form>, especially when it includes file uploads. It's the simplest way to handle multipart/form-data submissions from client-side JavaScript without a full page reload. It's also useful for programmatically building form data without an actual <form> element in the DOM.
When not to use it
If you're sending simple, flat data without files, using a plain JavaScript object with JSON.stringify() is often cleaner. FormData is specifically for the application/x-www-form-urlencoded or multipart/form-data content types, not application/json. If your API expects JSON, stick to plain objects.
One canonical example
The key footgun in TypeScript is that FormData is not type-safe. formData.get('email') does not return a string; it returns FormDataEntryValue, which is a union of string | File | null. To use it safely, you must perform a type check. For example: const emailValue = formData.get('email'); if (typeof emailValue === 'string') { sendEmail(emailValue); }. Without this check, you'll get a type error when trying to use the value in a function that expects a specific type.
Interview question
What is the main challenge when retrieving values from a FormData object using get() in TypeScript?
- a.It returns a generic 'any' type, requiring manual assertion for all values.
- b.It always returns a 'string', even for file inputs, leading to potential runtime errors.
- c.It automatically infers the correct type based on the HTML input element's name attribute.
- d.It returns a union type of 'string | File | null', necessitating explicit type validation.Correct
Why? this is the answer
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.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #typescript
- #web-api
- #forms
- #fetch
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you 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.
We are hiring for this. Open roles that interview on typescript — each one lists the topics its interview covers.
See open roles