wip: improve props typing

packages/runtime-core/__tests__/createComponent.spec.ts

@@ -1,17 +1,34 @@
 import { createComponent } from '../src/component'
 import { value } from '@vue/observer'
+import { PropType } from '../src/componentProps'
 
 test('createComponent type inference', () => {
-  const MyComponent = createComponent({
+  createComponent({
     props: {
       a: Number,
+      // required should make property non-void
       b: {
-        type: String
+        type: String,
+        required: true
+      },
+      // default value should infer type and make it non-void
+      bb: {
+        default: 'hello'
+      },
+      // explicit type casting
+      cc: (Array as any) as PropType<string[]>,
+      // required + type casting
+      dd: {
+        type: (Array as any) as PropType<string[]>,
+        required: true
       }
-    },
+    } as const, // required to narrow for conditional check
     setup(props) {
-      props.a * 2
+      props.a && props.a * 2
       props.b.slice()
+      props.bb.slice()
+      props.cc && props.cc.push('hoo')
+      props.dd.push('dd')
       return {
         c: value(1),
         d: {
@@ -22,15 +39,61 @@ test('createComponent type inference', () => {
     render({ state, props }) {
       state.c * 2
       state.d.e.slice()
-      props.a * 2
+      props.a && props.a * 2
       props.b.slice()
-      this.a * 2
+      props.bb.slice()
+      props.cc && props.cc.push('hoo')
+      props.dd.push('dd')
+      this.a && this.a * 2
       this.b.slice()
+      this.bb.slice()
       this.c * 2
       this.d.e.slice()
+      this.cc && this.cc.push('hoo')
+      this.dd.push('dd')
     }
   })
-  MyComponent // avoid unused
   // rename this file to .tsx to test TSX props inference
   // ;(<MyComponent a={1} b="foo"/>)
 })
+
+test('type inference w/ optional props declaration', () => {
+  createComponent({
+    setup(props) {
+      props.anything
+      return {
+        a: 1
+      }
+    },
+    render({ props, state }) {
+      props.foobar
+      state.a * 2
+      this.a * 2
+
+      // should not make state and this indexable
+      // state.foobar
+      // this.foobar
+    }
+  })
+})
+
+// test('type inference w/ array props declaration', () => {
+//   createComponent({
+//     props: ['a', 'b'],
+//     setup(props) {
+//       props.a
+//       props.b
+//       return {
+//         c: 1
+//       }
+//     },
+//     render({ props, state }) {
+//       props.a
+//       props.b
+//       state.c
+//       this.a
+//       this.b
+//       this.c
+//     }
+//   })
+// })