feat: add lifecycle types into vue instance type (#371)

* fix: add lifecycle types into vue instance type

* docs: state about to add lifecycle hook type

Author: ktsn

README.md

@@ -200,6 +200,37 @@ new Vue({
 })
 ```
 
+In TypeScript, all built-in lifecycle hools and special methods are declared in the component instance type to enable auto-complete in editors.
+If you want to make it work with custom hooks, you can manually add it by yourself:
+
+```ts
+import Vue from 'vue'
+import { Route, RawLocation } from 'vue-router'
+
+declare module 'vue/types/vue' {
+  // Augment component instance type
+  interface Vue {
+    beforeRouteEnter?(
+      to: Route,
+      from: Route,
+      next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
+    ): void
+
+    beforeRouteLeave?(
+      to: Route,
+      from: Route,
+      next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
+    ): void
+
+    beforeRouteUpdate?(
+      to: Route,
+      from: Route,
+      next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
+    ): void
+  }
+}
+```
+
 ### Caveats of Class Properties
 
 vue-class-component collects class properties as Vue instance data by instantiating the original constructor under the hood. While we can define instance data like native class manner, we sometimes need to know how it works.

src/index.ts

@@ -1,3 +1,4 @@
+import './lifecycle'
 import Vue, { ComponentOptions } from 'vue'
 import { VueClass } from './declarations'
 import { componentFactory, $internalHooks } from './component'

src/lifecycle.ts

@@ -0,0 +1,20 @@
+import { VNode } from 'vue'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    data?(): object
+    beforeCreate?(): void
+    created?(): void
+    beforeMount?(): void
+    mounted?(): void
+    beforeDestroy?(): void
+    destroyed?(): void
+    beforeUpdate?(): void
+    updated?(): void
+    activated?(): void
+    deactivated?(): void
+    render?(createElement: CreateElement): VNode
+    errorCaptured?(err: Error, vm: Vue, info: string): boolean | undefined
+    serverPrefetch?(): Promise<unknown>
+  }
+}