Blog Typescript Types

What are the suggested types for the mdx.tsx definitions? (app/components/mdx.tsx)

I'm using the blog for inspiration. I'm using strict typing on my tsconfig.jsx, so I'm getting a ton of errors like X has implicit type any and whatnot.

I've managed to "guess" a few of the types like for the table and heading, for example.

export function Table({
  tableHeaders,
  tableRows,
}: {
  tableHeaders: string[];
  tableRows: string[][];
}) {
  ...
}

...

export function createHeading(level: number) {
  const Heading = ({ children }: { children: string }) => {
    ...
  }
  Heading.displayName = `Heading${level}`;

  return Heading;
}

For the CustomMDX component, I'm super stuck! I have something like this, but now props.components doesn't exist on {}.

export function CustomMDX({ source, ...props }: { source: string }) {
  return (
    <MDXRemote
      source={source}
      {...props}
      components={{ ...components, ...(props.components || {}) }}
    />
  );
}

And let's say that I removed the props.components spread. I get an error like this.

Type '{ h1: { ({ children }: { children: string; }): React.ReactElement<{ id: string; }, string | React.JSXElementConstructor<any>>; displayName: string; }; h2: { ({ children }: { children: string; }): React.ReactElement<{ id: string; }, string | React.JSXElementConstructor<any>>; displayName: string; }; ... 7 more ...; T...' is not assignable to type 'Readonly<MDXComponents> | MergeComponents | null | undefined'.
  Type '{ h1: { ({ children }: { children: string; }): React.ReactElement<{ id: string; }, string | React.JSXElementConstructor<any>>; displayName: string; }; h2: { ({ children }: { children: string; }): React.ReactElement<{ id: string; }, string | React.JSXElementConstructor<any>>; displayName: string; }; ... 7 more ...; T...' is not assignable to type 'Readonly<MDXComponents>'.
    Types of property 'a' are incompatible.
      Type '({ children, href, ...props }: { children: ReactNode; href: string; }) => Element' is not assignable to type 'Component<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>> | undefined'.
        Type '({ children, href, ...props }: { children: ReactNode; href: string; }) => Element' is not assignable to type '(props: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => ReactNode'.
          Types of parameters '__0' and 'props' are incompatible.
            Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type '{ children: ReactNode; href: string; }'.
              Types of property 'children' are incompatible.
                Type 'import("/Users/justinhoang/Documents/Github/personal-website/node_modules/.pnpm/@types+react@18.3.11/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
                  Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
                    Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2322)

Any help is greatly appreciated! I would like to keep that strict typing on in the tsconfig.json if possible. The reason why is because I use Vercel, which checks these types of rules, so my builds have been failing even though the development server is working.

Start with app/components/mdx.tsx and the CustomMDX, Table, and createHeading definitions, then check the strict settings in tsconfig.json. Reproduce the type errors around MDXRemote and its components prop. Done means the example builds successfully with strict typing and the reported implicit-any and component-type errors are resolved.