docs: add a guide to annotate component type in decorator (#450)

ktsn · web-flow · commit 7f17ca6b40d4 · 2020-09-14T23:50:37.000+08:00
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -44,7 +44,8 @@ module.exports = {
             'guide/props-definition.md',
             'guide/property-type-declaration.md',
             'guide/refs-type-extension.md',
-            'guide/hooks-auto-complete.md'
+            'guide/hooks-auto-complete.md',
+            'guide/annotate-component-type-in-decorator'
           ]
         }
       ]
diff --git a/docs/guide/annotate-component-type-in-decorator.md b/docs/guide/annotate-component-type-in-decorator.md
@@ -0,0 +1,45 @@
+# Annotate Component Type in Decorator
+
+There are cases that you want to use your component type on a function in `@Component` decorator argument.
+For example, to access component methods in a watch handler:
+
+```ts
+@Component({
+  watch: {
+    postId(id: string) {
+      // To fetch post data when the id is changed.
+      this.fetchPost(id) // -> Property 'fetchPost' does not exist on type 'Vue'.
+    }
+  }
+})
+class Post extends Vue {
+  postId: string
+
+  fetchPost(postId: string): Promise<void> {
+    // ...
+  }
+}
+```
+
+The above code produces a type error that indicates `fetchPost` does not exist on `this` in the watch handler. This happens because `this` type in `@Component` decorator argument is the base `Vue` type.
+
+To use your own component type (in this case `Post`), you can annotate the decorator through its type parameter.
+
+```ts
+// Annotate the decorator with the component type 'Post' so that `this` type in
+// the decorator argument becomes 'Post'.
+@Component<Post>({
+  watch: {
+    postId(id: string) {
+      this.fetchPost(id) // -> No errors
+    }
+  }
+})
+class Post extends Vue {
+  postId: string
+
+  fetchPost(postId: string): Promise<void> {
+    // ...
+  }
+}
+```

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,8 @@ module.exports = {`
`44`	`44`	`'guide/props-definition.md',`
`45`	`45`	`'guide/property-type-declaration.md',`
`46`	`46`	`'guide/refs-type-extension.md',`
`47`		`- 'guide/hooks-auto-complete.md'`
	`47`	`+ 'guide/hooks-auto-complete.md',`
	`48`	`+ 'guide/annotate-component-type-in-decorator'`
`48`	`49`	`]`
`49`	`50`	`}`
`50`	`51`	`]`