FormData in TypeScript
I’m trying to get in the habit of writing a post about anything that takes me more than, say, 15 minutes of trial and error and Google to get right. Chances are I’m not the first nor the last to hit any particular roadblock.
This is both a tutorial and a request for help!
edit: @foresthoffman provided the help I needed! I’ve updated the post to include the fix.
I’m working on a small toy app that needs a few controls to specify how to draw something to the canvas. A <form> seems like the natural choice for this, but using the data from TypeScript proved a little bit tricky.
The MDN page on FormData suggests using syntax like the following:
I had no luck with these. Using for..of causes TypeScript to complain that data is not an iterator (I think it is, or at least in JS it can be used like one with for...of), or that data has no such property entries. This makes a little more sense - it doesn’t yet in all environments. I tried tweaking my tsconfig.json to target esnext but that didn’t do it, and I’d rather keep that set to es5 anyway. Switching to use for..in on data does what you’d expect, really - it enumerates all of the methods available on data:
Neat, I guess, but not what I’m looking for! Frustratingly, entries appears. Why can I not use it?
It turns out the fix for this is subtle - you need to specifically tell TypeScript you’re going to be using this method by adding dom.iterable to your tsconfig.json - it’s not automatically brought in with “dom”:
This compiler option “provide[s] full support for iterables in ‘for-of’, spread, and destructuring when targeting ‘ES5’ or ‘ES3’.” Now our code can match the JS exactly!
I’m leaving my workaround for posterity, because in some simple cases I’d prefer to skip the iterator and do it this way anyway. It simply doesn’t iterate at all, it looks for what it needs. As an example, here’s part of the form in question:
To get at the user’s choice, I’m using code like this:
A few TypeScript-y things to note - I’m using the ! operator at the end of the querySelector call. This is the non-null assertion operator - querySelector returns a value of type Element | null. I prefer to keep strictNullChecks on, so TS doesn’t enjoy me trying to operate on form as if it were an element - this operator tells the compiler that I promise there will be a form to select and it won’t return null.
Also, FormData.get() returns a value of type string | File | null. This is another case where I’ve quite literally just written the form myself - I know it’s gonna be a string. I’m using as to cast to the proper type.
Finally, I return false to prevent the page from actually reloading - the re-draw to the canvas happens inside doCoolThing, and if the page reloads it’ll disappear along with the form data! I’m not sending anything to a server, just using the user input locally on the page.
This does do the trick - I can just grab the the form data I want one at a time without using the iterator to configure the output.