[examples] `NextLinkComposedProps` gives a TypeScript error

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The nextjs-with-typescript example docs suggest composing NextLink and MuiLink using

interface NextLinkComposedProps
  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
    Omit<NextLinkProps, 'href' | 'as'> {
  to: NextLinkProps['href'];
  linkAs?: NextLinkProps['as'];
}

However, TypeScript complains with

Interface ‘NextLinkComposedProps’ cannot simultaneously extend types ‘Omit<AnchorHTMLAttributes<HTMLAnchorElement>, “href”>’ and ‘Omit<InternalLinkProps, “href” | “as”>’. Named property ‘onClick’ of types ‘Omit<AnchorHTMLAttributes<HTMLAnchorElement>, “href”>’ and ‘Omit<InternalLinkProps, “href” | “as”>’ are not identical.

Interface ‘NextLinkComposedProps’ cannot simultaneously extend types ‘Omit<AnchorHTMLAttributes<HTMLAnchorElement>, “href”>’ and ‘Omit<InternalLinkProps, “href” | “as”>’. Named property ‘onMouseEnter’ of types ‘Omit<AnchorHTMLAttributes<HTMLAnchorElement>, “href”>’ and ‘Omit<InternalLinkProps, “href” | “as”>’ are not identical.

Expected behavior 🤔

I’m not sure why this is happening, or what the best way to fix it is, besides also omitting 'onClick' | 'onMouseEnter' from either NextLinkProps or React.AnchorHTMLAttributes<HTMLAnchorElement>.

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0
    @emotion/styled: ^11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.79
    @mui/icons-material: ^5.6.2 => 5.6.2
    @mui/material: ^5.6.2 => 5.6.4
    @mui/private-theming:  5.6.2
    @mui/styled-engine:  5.6.1
    @mui/system:  5.6.4
    @mui/types:  7.1.3
    @mui/utils:  5.6.1
    @types/react: ^18.0.8 => 18.0.8
    react: ^18.1.0 => 18.1.0
    react-dom: ^18.1.0 => 18.1.0
    typescript: ^4.6.4 => 4.6.4

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "jsxImportSource": "@emotion/react",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

[ZeeshanTamboli]

I’m not sure why this is happening

While extending, if there same member name in multiple interfaces (React.AnchorHTMLAttributes<HTMLAnchorElement> and NextLinkProps) then they must have identical data types as well.

The change was introduced in https://github.com/vercel/next.js/pull/36436 in NextJS version 12.1.6 at https://github.com/vercel/next.js/pull/36436/files#diff-8acbf39f6c8f78de00c1be9339c3f839cd7f9a21f3c1d825cd23c14d4f11d718R33-R40.

what the best way to fix it is, besides also omitting ‘onClick’ | ‘onMouseEnter’ from either NextLinkProps or React.AnchorHTMLAttributes<HTMLAnchorElement>.

I think the best way would be to omit the types from NextLinkProps instead of React.AnchorHTMLAttributes<HTMLAnchorElement> because the remaining props is being spread to Anchor a HTML element:

diff --git a/examples/nextjs-with-typescript/src/Link.tsx b/examples/nextjs-with-typescript/src/Link.tsx
index f8871ea74d..9d49184f14 100644
--- a/examples/nextjs-with-typescript/src/Link.tsx
+++ b/examples/nextjs-with-typescript/src/Link.tsx
@@ -10,7 +10,7 @@ const Anchor = styled('a')({});

 interface NextLinkComposedProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
-    Omit<NextLinkProps, 'href' | 'as'> {
+    Omit<NextLinkProps, 'href' | 'as' | 'onClick' | 'onMouseEnter'> {
   to: NextLinkProps['href'];
   linkAs?: NextLinkProps['as'];
 }

Will create a PR soon.

[ZeeshanTamboli]

@lony Is it the onTouchStart error? If yes, a PR has been opened for it in #33842. You can omit onTouchStart from NextLinkProps.