Get TypeScript Coverage for Dynamic Parameters in Remix with Invariant

TypeScript is giving us a bunch of warnings. Let’s go through and correct some of those and get some type safety.

For marked we’ll just install @types/marked as a dev dependency. But, with our dynamic parameter slug it’ll be a bit trickier since if we rename the file it’ll change the param name and references to slug will become invalid.

To solve this issue we can use the library invariant, which we can use to check if something exists, and then throw an error if it doesn’t. This way TypeScript is happy since it knows that it’s impossible for slug to be null or undefined.

Then lastly we just define a LoaderData type for the data that our loader returns.