docs: improve custom event typing

vitejs · Sep 2, 2022 · 9fbfe17 · 9fbfe17
1 parent ee2d017
commit 9fbfe17
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/docs/guide/api-plugin.md b/docs/guide/api-plugin.md
@@ -595,12 +595,21 @@ It is possible to type custom events by extending the `CustomEventMap` interface
 
 ```ts
 // events.d.ts
+import 'vite'
 import 'vite/client/types'
 
+interface MyCustomEventMap {
+  'custom:foo': { msg: string }
+  // 'event-key': payload
+}
+
+// extend interface for server-side
+declare module 'vite' {
+  interface CustomEventMap extends MyCustomEventMap {}
+}
+
+// extend interface for client-side
 declare module 'vite/client/types' {
-  interface CustomEventMap {
-    'custom:foo': { msg: string }
-    // 'event-key': payload
-  }
+  interface CustomEventMap extends MyCustomEventMap {}
 }
 ```
diff --git a/playground/hmr/event.d.ts b/playground/hmr/event.d.ts
@@ -1,9 +1,16 @@
+import 'vite'
 import 'vite/client/types'
 
+interface MyCustomEventMap {
+  'custom:foo': { msg: string }
+  'custom:remote-add': { a: number; b: number }
+  'custom:remote-add-result': { result: string }
+}
+
+declare module 'vite' {
+  interface CustomEventMap extends MyCustomEventMap {}
+}
+
 declare module 'vite/client/types' {
-  interface CustomEventMap {
-    'custom:foo': { msg: string }
-    'custom:remote-add': { a: number; b: number }
-    'custom:remote-add-result': { result: string }
-  }
+  interface CustomEventMap extends MyCustomEventMap {}
 }