Skip to content
🎉MDX Conf — August 24th, 2020
MDX logo
v1.6.18

TypeScript

Below are some basic typings to get started with:

declare module '@mdx-js/react' {
import * as React from 'react'
type ComponentType =
| 'a'
| 'blockquote'
| 'code'
| 'delete'
| 'em'
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'hr'
| 'img'
| 'inlineCode'
| 'li'
| 'ol'
| 'p'
| 'pre'
| 'strong'
| 'sup'
| 'table'
| 'td'
| 'thematicBreak'
| 'tr'
| 'ul'
export type Components = {
[key in ComponentType]?: React.ComponentType<{children: React.ReactNode}>
}
export interface MDXProviderProps {
children: React.ReactNode
components: Components
}
export class MDXProvider extends React.Component<MDXProviderProps> {}
}

If you want to improve upon the types we would love a PR to improve the developer experience for TypeScript users.


If you’re getting errors from TypeScript related to imports with an *.mdx extension, create an mdx.d.ts file in your types directory and include it inside your tsconfig.json.

// types/mdx.d.ts
declare module '*.mdx' {
let MDXComponent: (props: any) => JSX.Element
export default MDXComponent
}
Edit this page on GitHub
Previous:
Transform Content
Next:
Support