types(#42003): better typing for next/link (#42117)

<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

The PR closes #42003.

Replace `(e: any) => void` with
`React.MouseEventHandler<HTMLAnchorElement>` and
`React.TouchEventHandler<HTMLAnchorElement>`. The original typing
overlap issue has also been fixed.

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

packages/next/client/link.tsx

@@ -83,21 +83,18 @@ type InternalLinkProps = {
    * @see https://github.com/vercel/next.js/commit/489e65ed98544e69b0afd7e0cfc3f9f6c2b803b7
    */
   legacyBehavior?: boolean
-  // e: any because as it would otherwise overlap with existing types
   /**
    * Optional event handler for when the mouse pointer is moved onto Link
    */
-  onMouseEnter?: (e: any) => void
-  // e: any because as it would otherwise overlap with existing types
+  onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>
   /**
    * Optional event handler for when Link is touched.
    */
-  onTouchStart?: (e: any) => void
-  // e: any because as it would otherwise overlap with existing types
+  onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>
   /**
    * Optional event handler for when Link is clicked.
    */
-  onClick?: (e: any) => void
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>
 }
 
 // TODO-APP: Include the full set of Anchor props
@@ -520,14 +517,14 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
     ])
 
     const childProps: {
-      onTouchStart: React.TouchEventHandler
-      onMouseEnter: React.MouseEventHandler
-      onClick: React.MouseEventHandler
+      onTouchStart: React.TouchEventHandler<HTMLAnchorElement>
+      onMouseEnter: React.MouseEventHandler<HTMLAnchorElement>
+      onClick: React.MouseEventHandler<HTMLAnchorElement>
       href?: string
       ref?: any
     } = {
       ref: setRef,
-      onClick: (e: React.MouseEvent) => {
+      onClick(e) {
         if (process.env.NODE_ENV !== 'production') {
           if (!e) {
             throw new Error(
@@ -569,7 +566,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
           prefetchEnabled
         )
       },
-      onMouseEnter: (e: React.MouseEvent) => {
+      onMouseEnter(e) {
         if (!legacyBehavior && typeof onMouseEnterProp === 'function') {
           onMouseEnterProp(e)
         }
@@ -597,7 +594,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
           bypassPrefetchedCheck: true,
         })
       },
-      onTouchStart: (e: React.TouchEvent<HTMLAnchorElement>) => {
+      onTouchStart(e) {
         if (!legacyBehavior && typeof onTouchStartProp === 'function') {
           onTouchStartProp(e)
         }

test/e2e/new-link-behavior/typescript/pages/index.tsx

@@ -8,7 +8,7 @@ import {
 import NextLink, { LinkProps } from 'next/link'
 
 type NativeButtonProps = Omit<
-  HTMLProps<HTMLButtonElement>,
+  HTMLProps<HTMLAnchorElement>,
   'type' | 'prefix' | 'size' | 'width' | 'shape' | 'onClick'
 >
 

test/production/typescript-basic/app/pages/index.tsx

@@ -12,7 +12,23 @@ export default function Page() {
   return (
     <>
       <p>hello world</p>
-      <Link href="/another">to /another</Link>
+      <Link
+        href="/another"
+        onClick={(e) => {
+          console.log(e.currentTarget)
+        }}
+      >
+        to /another
+      </Link>
+      <Link
+        href="/another"
+        onClick={(e) => {
+          /** @ts-expect-error - foo does not exist on React.MouseEvent */
+          console.log(e.foo)
+        }}
+      >
+        to /another
+      </Link>
     </>
   )
 }