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.