enable MDX type checking

[remcohaszing]

I thought it would be nice to see how the latest MDX language server changes work out on a real-world project. So I picked an MDX heavy project to enable strict type checking.

In tsconfig.json **/*.mdx is now included explicitly. This makes the MDX files part of the same TypeScript program as the TypeScript files. This is only needed at all, because the include array is defined. It can also be omitted entirely.

The mdx.checkMdx option in tsconfig.json enables strict type checking for MDX files. It’s analogous to checkJs for JavaScript files. Feel free to disable this if it turns out to be annoying.

The global type MDXProvidedComponents specified which types are available inside MDX files globally.

There’s a type error in content/pages/live.mdx.

Several pages use the <callout-info> element. I’m not sure what this is. A fix would be to add this somewhere:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'callout-info': CalloutInfoProps
    }
  }
}

[kentcdodds]

Thanks! This is neat!

There’s a type error in content/pages/live.mdx.

I tried this locally and running TypeScript checking on the codebase didn't reveal any error. I also tried to create type error and got the same result. Is there something I'm missing?

The callout-* elements are just for styling purposes and are not actual components or elements that are transformed. They're rendered that way. For example:

So setting those to React.ComponentProps<'div'> would probably be sufficient.

[remcohaszing]

There’s no CLI support for MDX types yet, only editor support. If you use the MDX VSCode extension, the language server is enabled by default. I found the type error in content/pages/live.mdx by just randomly opening a couple of MDX files. CLI support is one of the next big features I want to work on though. 👀

I declared the various callout arguments. I defined CalloutProps manually, because you use the class prop instead of className.

[kentcdodds]

Cool! Thanks!