types: use stricter defaults for component data and props

packages/core/__tests__/attrsFallthrough.spec.ts

@@ -6,7 +6,9 @@ describe('attribute fallthrough', () => {
     const nativeClick = jest.fn()
     const childUpdated = jest.fn()
 
-    class Hello extends Component {
+    class Hello extends Component<{
+      count: number
+    }> {
       data() {
         return {
           count: 0
@@ -27,7 +29,7 @@ describe('attribute fallthrough', () => {
       }
     }
 
-    class Child extends Component {
+    class Child extends Component<{}, { foo: number }> {
       updated() {
         childUpdated()
       }
@@ -73,7 +75,7 @@ describe('attribute fallthrough', () => {
     const nativeClick = jest.fn()
     const childUpdated = jest.fn()
 
-    class Hello extends Component {
+    class Hello extends Component<{ count: number }> {
       data() {
         return {
           count: 0
@@ -94,7 +96,7 @@ describe('attribute fallthrough', () => {
       }
     }
 
-    class Child extends Component {
+    class Child extends Component<{}, { foo: number }> {
       static options = {
         props: {
           foo: Number
@@ -147,7 +149,7 @@ describe('attribute fallthrough', () => {
     const childUpdated = jest.fn()
     const grandChildUpdated = jest.fn()
 
-    class Hello extends Component {
+    class Hello extends Component<{ count: number }> {
       data() {
         return {
           count: 0
@@ -182,7 +184,7 @@ describe('attribute fallthrough', () => {
       }
     }
 
-    class GrandChild extends Component {
+    class GrandChild extends Component<{}, { foo: number }> {
       static options = {
         props: {
           foo: Number

packages/core/src/component.ts

@@ -13,17 +13,17 @@ import { ErrorTypes } from './errorHandling'
 
 type Flatten<T> = { [K in keyof T]: T[K] }
 
-export type RenderFunction<P = Data> = (
+export type RenderFunction<P = {}> = (
   props: P,
   slots: Slots,
   attrs: Data
 ) => any
 
 export interface ComponentClass extends Flatten<typeof InternalComponent> {
-  new <D = Data, P = Data>(): D & P & MountedComponent<D, P>
+  new <D = {}, P = {}>(): D & P & MountedComponent<D, P>
 }
 
-export interface FunctionalComponent<P = Data> extends RenderFunction<P> {
+export interface FunctionalComponent<P = {}> extends RenderFunction<P> {
   pure?: boolean
   props?: ComponentPropsOptions<P>
   inheritAttrs?: boolean
@@ -33,8 +33,7 @@ export type ComponentType = ComponentClass | FunctionalComponent
 
 // this interface is merged with the class type
 // to represent a mounted component
-export interface MountedComponent<D = Data, P = Data>
+export interface MountedComponent<D = {}, P = {}> extends InternalComponent {
-  extends InternalComponent {
   $vnode: MountedVNode
   $data: D
   $props: P

packages/core/src/componentProps.ts

@@ -37,11 +37,11 @@ export function updateProps(instance: MountedComponent, nextData: Data) {
     const rawProps = unwrap(props)
     for (const key in rawProps) {
       if (!nextProps.hasOwnProperty(key)) {
-        delete props[key]
+        delete (props as any)[key]
       }
     }
     for (const key in nextProps) {
-      props[key] = nextProps[key]
+      ;(props as any)[key] = nextProps[key]
     }
     if (nextAttrs) {
       const attrs = instance.$attrs

packages/core/src/optional/asyncComponent.ts

@@ -1,6 +1,7 @@
 import { ChildrenFlags } from '../flags'
 import { createComponentVNode, Slots } from '../vdom'
 import { Component, ComponentType, ComponentClass } from '../component'
+import { unwrap } from '@vue/observer'
 
 export interface AsyncComponentFactory {
   (): Promise<ComponentType>
@@ -92,7 +93,7 @@ export function createAsyncComponent(
       } else if (this.comp) {
         return createComponentVNode(
           this.comp,
-          props,
+          unwrap(props),
           slots,
           ChildrenFlags.STABLE_SLOTS
         )

packages/core/src/optional/context.ts

@@ -4,15 +4,23 @@ import { Slots } from '../vdom'
 
 const contextStore = observable() as Record<string | symbol, any>
 
-export class Provide extends Component {
+interface ProviderProps {
+  id: string | symbol
+  value: any
+}
+
+export class Provide extends Component<{}, ProviderProps> {
   updateValue() {
-    contextStore[this.$props.id] = this.$props.value
+    // TS doesn't allow symbol as index :/
+    // https://github.com/Microsoft/TypeScript/issues/24587
+    contextStore[this.$props.id as string] = this.$props.value
   }
   created() {
     if (__DEV__) {
-      if (contextStore.hasOwnProperty(this.$props.id)) {
+      const { id } = this.$props
+      if (contextStore.hasOwnProperty(id)) {
         console.warn(
-          `A context provider with id ${this.$props.id} already exists.`
+          `A context provider with id ${id.toString()} already exists.`
         )
       }
       this.$watch(
@@ -31,7 +39,7 @@ export class Provide extends Component {
   beforeUpdate() {
     this.updateValue()
   }
-  render(props: any, slots: Slots) {
+  render(props: ProviderProps, slots: Slots) {
     return slots.default && slots.default()
   }
 }