TypeScript support for .mdx file extensions

[PaulieScanlon]

Search Terms

• .mdx
• mdx
• mdx support

Suggestion

Could or would it be on the road map to allow type checking in non .ts files. In my case i'm specifically wondering if TypeScript can type check React components in .mdx files

Use Cases

I've written a gatsby plugin gatsby-mdx-embed that allows users to embed media content from YouTube, Twitter, Instagram etc in their .mdx files.

The plugin is written in TypeScript and all of the components have props. It would be sweet if when these components are used in .mdx files a user could either see the prop types by hovering over the component or more importantly would get a type error (squiggly line) in their code editor if the prop name is incorrect or of incorrect type.

Examples

Here's an example .mdx file

You can below there the Gist component accepts a gistLink prop of type string.

<Playground>
  <Gist gistLink="PaulieScanlon/ca0cc9239176066492cb2aba435edbf7" />
</Playground>

If a user misspelled gistLink or provided a number / array or object etc the editor would alert them there's been an error in the prop type used.

[Peeja]

Similarly, when writing Storybook stories in MDX, it would be a big help to have TypeScript understand them. Stories are a kind of test, and not type-checking tests is a scary prospect.

[donaldpipowitch]

As others already said .mdx currently gets a lot of traction - especially in the Gatsby and Storybook community. To chime in with something useful in the discussion here some download stats for @mdx-js/mdx.

I'd _love_ to see .mdx support in TypeScript (as long as it isn't possible to add such a feature in community land via "plugins").

Another argument which wasn't mentioned yet as far as I know for not creating a standalone "MDX Language Server": .mdx files can be dropped into any existing TypeScript project. You can't just import other TypeScript files into your .mdx file - it also works the other way around. .mdx files can _export_ things as well. At the end it is just a JavaScript/TypeScript file with a different syntax - not much different to the JSX support TypeScript offers.

[nicmosc]

Any news on this? Currently building a component library in TS and writing the documentation with MDX. As you can imagine it's a pain right now using those components without any hints about the props, which are easily available in any .tsx file, but non-existant in .mdx