From 3b4594f6d796349c08e189f57884386682ccb6f0 Mon Sep 17 00:00:00 2001
From: Sukka <isukkaw@gmail.com>
Date: Tue, 15 Nov 2022 04:37:41 +0800
Subject: [PATCH] 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                 | 21 ++++++++-----------
 .../typescript/pages/index.tsx                |  2 +-
 .../typescript-basic/app/pages/index.tsx      | 18 +++++++++++++++-
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx
index 22fe09d5a0d6690..54b51d8a51bb9b2 100644
--- a/packages/next/client/link.tsx
+++ b/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)
         }
diff --git a/test/e2e/new-link-behavior/typescript/pages/index.tsx b/test/e2e/new-link-behavior/typescript/pages/index.tsx
index fca8dae883aec42..241fb59814ec85c 100644
--- a/test/e2e/new-link-behavior/typescript/pages/index.tsx
+++ b/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'
 >
 
diff --git a/test/production/typescript-basic/app/pages/index.tsx b/test/production/typescript-basic/app/pages/index.tsx
index 94e197abd4557f5..89f720520cf6104 100644
--- a/test/production/typescript-basic/app/pages/index.tsx
+++ b/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>
     </>
   )
 }