2.1.0 tsx attribute types, in class render

Author: ruojianll

docs/_sidebar.md

@@ -15,4 +15,6 @@
 - Inheritance
     - [ECMAScript class](inheritance/es-class/es-class.md)
     - [Component](inheritance/component/component.md)
-    - [Complex example](inheritance/complex-example/complex-example.md)
+    - [Complex example](inheritance/complex-example/complex-example.md)
+- TSX
+    - [Attribute types](tsx/attribute-types/attribute-types.md)

docs/class-component/component-property/code-option-type.ts

@@ -18,5 +18,5 @@ export default class MyComponent extends Vue {
     @Prop({
         type: String
     })
-    p!: string
+    p?: string
 }

docs/class-component/component-property/code-option-validator.ts

@@ -22,5 +22,5 @@ export default class MyComponent extends Vue {
             return true
         }
     })
-    p!: string
+    p?: string
 }

docs/class-component/component-property/code-usage.ts

@@ -16,5 +16,5 @@ Vue option component
 @Component
 export default class MyComponent extends Vue {
     @Prop
-    p!: string
+    p?: string
 }

docs/class-component/component/component.md

@@ -54,6 +54,8 @@ This is the `render` in vue option component api.
 
 If you use vue Single-File component. The render will be applied to the `export default` component automatically.
 
+> This will overwrite the render in class body.
+
 [](./code-option-template.ts ':include :type=code typescript')
 
 ### template

docs/class-component/event/event.md

@@ -1,6 +1,6 @@
 ## Usage
 
-You could define a method which triggers a vue event by `Emit` decorator.
+We could define a method which triggers a vue event by `Emit` decorator.
 
 The decorator received an optional event name paramater. Event will be triggered with this name and the method returned value. If the event name parameter is omitted, use method's name by default.
 

docs/class-component/lifecycle-hook/lifecycle-hook.md

@@ -23,10 +23,13 @@ Class component supports almost all lifecycle hooks in vanilla vue. Write then a
     "renderTracked",
     "renderTriggered",
     "errorCaptured",
-    "serverPrefetch"
+    "serverPrefetch",
+    "render"
 ]
 ```
 
+All these hooks must be methods of a class, not properties.
+
 ## For other names
 
 If your hook names aren't in the above list. You could use `options` or `modifier` in `Component` decorator.

docs/class-component/method/method.md

@@ -1,5 +1,5 @@
 ## Usage
 
-In a class component, you could define methods of vue option component as class methods directly. Library will analyze methods and transform them into `methods` option.
+In a class component, we could define methods of vue option component as class methods directly. Library will analyze methods and transform them into `methods` option.
 
 [](./code-usage.ts ':include :type=code typescript')

docs/tsconfig.json

@@ -29,5 +29,6 @@
     },
     "include": [
         "./**/*.ts",
+        "./**/*.tsx",
     ],
 }

docs/tsx/attribute-types/attribute-types.md

@@ -0,0 +1,28 @@
+## Usage
+
+To make enable TSX attribute types:
+
+1. Import `TSX` function from this repo.
+
+2. Define an interface(i.e. `Props`) to decribe properties in component.
+
+3. Make your component extend from `TSX<Props>()(BaseComponent)`.
+
+> There are two `()`s after `TSX<Props>`.
+
+[](./code-usage.tsx ':include :type=code tsx')
+
+## Type checking
+
+We could check if component implements properties by `implements`.
+
+[](./code-type-checking.tsx ':include :type=code tsx')
+
+## Component inheritance
+
+TSX attributes supports component inheritance.
+
+[](./code-component-inheritance.tsx ':include :type=code tsx')
+
+
+