From 7d9996c464602475d88054face8b4444e5a79c40 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Tue, 29 Jun 2021 13:22:45 +0200
Subject: [PATCH 1/2] feat: add typing native events

---
 src/guide/typescript-support.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md
index 53e2593f5c..c7498d8d47 100644
--- a/src/guide/typescript-support.md
+++ b/src/guide/typescript-support.md
@@ -486,3 +486,36 @@ export default defineComponent({
   }
 })
 ```
+
+### Typing Event Handlers
+
+When dealing with native DOM events, it might be useful to type the argument we pass to the handler correctly. Let's take a look at this example:
+
+```vue
+<template>
+  <input type="text" @change="handleChange" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    // `evt` will be of type `any`
+    const handleChange = evt => {
+      console.log(evt.target.value) // TS will throw an error here
+    }
+
+    return { handleChange }
+  }
+})
+</script>
+```
+
+As you can see, without annotating the `evt` argument correctly, TypeScript will throw an error when we try to access the value of the `<input>` element. The solution is to cast the event target with a correct type:
+
+```js
+const handleChange = (evt: Event) => {
+  console.log((evt.target as HTMLInputElement).value)
+}
+```

From 61ab0e8fdfe6520d0aaefc4bbaaa672ee37ab3f3 Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Sat, 3 Jul 2021 07:44:29 +0300
Subject: [PATCH 2/2] Update src/guide/typescript-support.md

Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com>
---
 src/guide/typescript-support.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md
index c7498d8d47..550771f713 100644
--- a/src/guide/typescript-support.md
+++ b/src/guide/typescript-support.md
@@ -514,7 +514,7 @@ export default defineComponent({
 
 As you can see, without annotating the `evt` argument correctly, TypeScript will throw an error when we try to access the value of the `<input>` element. The solution is to cast the event target with a correct type:
 
-```js
+```ts
 const handleChange = (evt: Event) => {
   console.log((evt.target as HTMLInputElement).value)
 }