Typing constants from MDX files

[mirhamasala]

Given an MDX file like the one below, how would I type the meta constant?

import { PostLayout } from "@/components/PostLayout";

export const meta = {
  categories: ["about"],
  date: "2016-03-18T08:21:17",
  date_modified: "2017-10-06T11:00:22",
  description:
    "Born in Sarajevo, Bosnia and Herzegovina. Grown in Delft, The Netherlands. Fled the small Dutch town as soon as I reached the age of 18 and moved to glorious Amsterdam for European Studies and parties. Pursued a career in foreign affairs but then dropped the dream when I found out […]",
  id: "5065",
  slug: "about-me",
  status: "published",
  tags: ["about"],
  title: "Me in 45 Seconds",
  type: "page",
};

export default (props) => <PostLayout meta={meta} {...props} />;

I tried adding the types to the PostLayout component directly, but it didn't seem to work either (or at least I do not see any errors when there should be some).

type Props = {
  meta: Meta;
  isRssFeed?: boolean;
  previousPathname?: string;
  children: React.ReactNode;
};

export function PostLayout({
  children,
  meta,
  isRssFeed = false,
  previousPathname,
}: Props) {...}

[wooorm]

Hoi Mirha!

We don’t support TypeScript in MDX, so a type in a file won’t work, it’s markdown + JS(X).

But you can type files, the same way TS can type other files. More on how that can work is explained in the MDX types: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/bf97413d7680529146ed26d1f04a74f6e5bf1540/types/mdx/index.d.ts#L10. Does that help, and work for you?

I notice that isn’t on our site yet (https://mdxjs.com/docs/getting-started/#types). Probably a good idea to have something there.

[mirhamasala]

Thank you. That looks like something I can try! If I can make it work that would solve seeing the type errors in the MDX files.

Still, one thing that's puzzling, shouldn't PostLayout pick up on the types regardless?

[wooorm]

As far as I can tell, that’s about your PostLayout component, which you write in a TS file somewhere outside of MDX? If so, that’s more to do with what framework you use, probably?

My suggestion has more to do with how you’d type import Content from './path/to/file.mdx', if you don’t use imports to MDX files, but something else (ContentLayer?), then I don’t know how they work, maybe try asking there?

[mirhamasala]

Thank you, Titus. I will look into it! (It's just React + Next.js, by the way.) 🙏🏼