From 70d942fb3a2ef0ce7cac02cc3e0f7d0eda93d2b2 Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Mon, 17 Feb 2025 23:08:44 -0600
Subject: [PATCH] docs: Switch TS Events docs to use `.currentTarget`

---
 content/en/guide/v10/typescript.md | 31 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
index d29dc344f..4541802e2 100644
--- a/content/en/guide/v10/typescript.md
+++ b/content/en/guide/v10/typescript.md
@@ -5,7 +5,7 @@ description: "Preact has built-in TypeScript support. Learn how to make use of i
 
 # TypeScript
 
-Preact ships TypeScript type definitions, which are used by the library itself! 
+Preact ships TypeScript type definitions, which are used by the library itself!
 
 When you use Preact in a TypeScript-aware editor (like VSCode), you can benefit from the added type information while writing regular JavaScript. If you want to add type information to your own applications, you can use [JSDoc annotations](https://fettblog.eu/typescript-jsdoc-superpowers/), or write TypeScript and transpile to regular JavaScript. This section will focus on the latter.
 
@@ -233,35 +233,32 @@ Now when we use `Input` it will know about properties like `value`, ...
 Preact emits regular DOM events. As long as your TypeScript project includes the `dom` library (set it in `tsconfig.json`), you have access to all event types that are available in your current configuration.
 
 ```tsx
+import type { JSX } from "preact";
+
 export class Button extends Component {
-  handleClick(event: MouseEvent) {
-    event.preventDefault();
-    if (event.target instanceof HTMLElement) {
-      alert(event.target.tagName); // Alerts BUTTON
-    }
+  handleClick(event: JSX.TargetedMouseEvent<HTMLButtonElement>) {
+    alert(event.currentTarget.tagName); // Alerts BUTTON
   }
 
   render() {
-    return <button onClick={this.handleClick}>{this.props.children}</button>;
+    return (
+      <button onClick={this.handleClick}>
+        {this.props.children}
+      </button>
+    );
   }
 }
 ```
 
-You can restrict event handlers by adding a type annotation for `this` to the function signature as the first argument. This argument will be erased after transpilation.
+If you prefer inline functions, you can forgo explicitly typing the current event target as it is inferred from the JSX element:
 
 ```tsx
 export class Button extends Component {
-  // Adding the this argument restricts binding
-  handleClick(this: HTMLButtonElement, event: MouseEvent) {
-    event.preventDefault();
-    if (event.target instanceof HTMLElement) {
-      console.log(event.target.localName); // "button"
-    }
-  }
-
   render() {
     return (
-      <button onClick={this.handleClick}>{this.props.children}</button>
+      <button onClick={(event) => alert(event.currentTarget.tagName)}>
+        {this.props.children}
+      </button>
     );
   }
 }