Usage with Typescript

[peduarte]

Hey Jeff

Loving this package, thanks for building this and next-mdx-enhanced 🙏

I've got a problem when using it with Typescript:

It seems that its unable to recognise this pattern.

Is this something you've come across before?

Cheers!

[maael]

Hey, my stop-gap solution for this at the moment is to add a file @types/mdx.d.ts to my project root with:

interface FrontMatter {
  __resourcePath: string;
  // And so on...
}

declare module "*.mdx" {
  let MDXComponent: (props: any) => JSX.Element;
  export default MDXComponent;
  export const frontMatter: FrontMatter[];
}

Obviously these aren't perfect types, but hey, it gets it working.

[peduarte]

@maael that's smart 👏

My approach was a bit different

In utils/blogPosts.tsx

// @ts-ignore
import { frontMatter } from '../pages/blog/**/*.mdx';
import { FrontMatter } from '../types';

export const blogPosts: FrontMatter[] = frontMatter;

In types/index.tsx

export type FrontMatter = {
  layout?: string;
  title: string;
  publishedAt: string;
  by?: string;
  __resourcePath: string;
};

Consuming

import { blogPosts } from '../utils/blogPosts'

[jescalan]

Is there any way to push this type of change into this library? If so, I would happily accept a contribution 😀