Update types for new features of v2.1 (#4305)

* add types for scoped slots

* update nextTick types for returning promise

* improve scoped slot type

Author: ktsn

types/test/options-test.ts

@@ -162,6 +162,37 @@ Vue.component('component', {
   delimiters: ["${", "}"]
 } as ComponentOptions<Component>);
 
+Vue.component('component-with-scoped-slot', {
+  render (h) {
+    interface ScopedSlotProps {
+      msg: string
+    }
+
+    return h('div', [
+      h('child', [
+        // default scoped slot as children
+        (props: ScopedSlotProps) => [h('span', [props.msg])]
+      ]),
+      h('child', {
+        scopedSlots: {
+          // named scoped slot as vnode data
+          item: (props: ScopedSlotProps) => [h('span', [props.msg])]
+        }
+      })
+    ])
+  },
+  components: {
+    child: {
+      render (h) {
+        return h('div', [
+          this.$scopedSlots['default']({ msg: 'hi' }),
+          this.$scopedSlots['item']({ msg: 'hello' })
+        ])
+      }
+    } as ComponentOptions<Vue>
+  }
+} as ComponentOptions<Vue>)
+
 Vue.component('functional-component', {
   props: ['prop'],
   functional: true,

types/test/vue-test.ts

@@ -45,6 +45,7 @@ class Test extends Vue {
     this.$nextTick(function() {
       this.$nextTick;
     });
+    this.$nextTick().then(() => {});
     this.$createElement("div", {}, "message");
   }
 
@@ -71,6 +72,7 @@ class Test extends Vue {
       }
     });
     this.nextTick(() => {});
+    this.nextTick().then(() => {});
     this.set({}, "", "");
     this.set([true, false, true], 1, true);
     this.delete({}, "");

types/vnode.d.ts

@@ -1,6 +1,8 @@
 import { Vue } from "./vue";
 
-export type VNodeChildren = VNodeChildrenArrayContents | string;
+export type ScopedSlot = (props: any) => VNodeChildrenArrayContents | string;
+
+export type VNodeChildren = VNodeChildrenArrayContents | [ScopedSlot] | string;
 export interface VNodeChildrenArrayContents {
   [x: number]: VNode | string | VNodeChildren;
 }
@@ -34,6 +36,7 @@ export interface VNodeComponentOptions {
 export interface VNodeData {
   key?: string | number;
   slot?: string;
+  scopedSlots?: { [key: string]: ScopedSlot };
   ref?: string;
   tag?: string;
   staticClass?: string;

types/vue.d.ts

@@ -8,7 +8,7 @@ import {
   DirectiveOptions,
   DirectiveFunction
 } from "./options";
-import { VNode, VNodeData, VNodeChildren } from "./vnode";
+import { VNode, VNodeData, VNodeChildren, ScopedSlot } from "./vnode";
 import { PluginFunction, PluginObject } from "./plugin";
 
 export type CreateElement = {
@@ -40,6 +40,7 @@ export declare class Vue {
   readonly $children: Vue[];
   readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[]};
   readonly $slots: { [key: string]: VNode[] };
+  readonly $scopedSlots: { [key: string]: ScopedSlot };
   readonly $isServer: boolean;
 
   $mount(elementOrSelector?: Element | String, hydrating?: boolean): this;
@@ -56,7 +57,8 @@ export declare class Vue {
   $once(event: string, callback: Function): this;
   $off(event?: string, callback?: Function): this;
   $emit(event: string, ...args: any[]): this;
-  $nextTick(callback?: (this: this) => void): void;
+  $nextTick(callback: (this: this) => void): void;
+  $nextTick(): Promise<void>;
   $createElement: CreateElement;
 
   static config: {
@@ -69,6 +71,7 @@ export declare class Vue {
 
   static extend(options: ComponentOptions<Vue> | FunctionalComponentOptions): typeof Vue;
   static nextTick(callback: () => void, context?: any[]): void;
+  static nextTick(): Promise<void>
   static set<T>(object: Object, key: string, value: T): T;
   static set<T>(array: T[], key: number, value: T): T;
   static delete(object: Object, key: string): void;