Dealing with Strictness
Learn to handle TypeScript strictness
We'll cover the following
Current errors
Compiling the file, I get a few errors:
- The
venue-display
file that is kicking off the call to React is not handling a potential undefined value. - Turbolinks can only be default-imported using the
allowSyntheticDefaultImports
. - The
dispatch
call to redux-thunk includes a type error that I don’t understand yet.
This is fewer than I was expecting, honestly. You can get more errors with other strict options, but they don’t seem tremendously useful to me to talk about.
Fixes
I’m going to fix the Turbolinks issue by adding the line "allowSyntheticDefaultImports": true,
to the tsconfig.json
file. This allows us to import modules that don’t have a default export, and doesn’t seem to have a whole lot of impact on us one way or another. Honestly, getting rid of Turbolinks would probably be fine as well.
Our venue_display
file has basically the same issue four times over: we have code like element.dataset["rows"]
, which is now technically of type string | undefined
, meaning the union type of a string or undefined, and we are passing it through to arguments that expect strings.
What we need to do is allow for the possibility that the values are undefined
by creating default values. This is a little slapdash, but it works fine for our purposes:
Get hands-on with 1200+ tech skills courses.