Blog Typescript Types

[suasuasuasuasua]

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.

[JamesVpog]

@suasuasuasuasua yes