fix(types): properly infer return type from async setup (#2051)

fix #2049
vuejs · Sep 14, 2020 · 24fcf6a · 24fcf6a
1 parent 0124eac
commit 24fcf6a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
@@ -5,7 +5,8 @@ import {
   ComponentOptionsWithArrayProps,
   ComponentOptionsWithObjectProps,
   ComponentOptionsMixin,
-  RenderFunction
+  RenderFunction,
+  UnwrapAsyncBindings
 } from './componentOptions'
 import {
   SetupContext,
@@ -37,7 +38,7 @@ export function defineComponent<Props, RawBindings = object>(
 ): ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
     Props,
-    RawBindings,
+    UnwrapAsyncBindings<RawBindings>,
     {},
     {},
     {},
@@ -78,7 +79,7 @@ export function defineComponent<
 ): ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
     Props,
-    RawBindings,
+    UnwrapAsyncBindings<RawBindings>,
     D,
     C,
     M,
@@ -130,7 +131,7 @@ export function defineComponent<
   // but now we can export array props in TSX
   CreateComponentPublicInstance<
     Readonly<{ [key in PropNames]?: any }>,
-    RawBindings,
+    UnwrapAsyncBindings<RawBindings>,
     D,
     C,
     M,
@@ -181,7 +182,7 @@ export function defineComponent<
 ): ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
     ExtractPropTypes<PropsOptions, false>,
-    RawBindings,
+    UnwrapAsyncBindings<RawBindings>,
     D,
     C,
     M,

diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
@@ -72,6 +72,8 @@ export interface ComponentCustomOptions {}
 
 export type RenderFunction = () => VNodeChild
 
+export type UnwrapAsyncBindings<T> = T extends Promise<infer S> ? S : T
+
 export interface ComponentOptionsBase<
   Props,
   RawBindings,

diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
@@ -27,7 +27,8 @@ import {
   OptionTypesType,
   OptionTypesKeys,
   resolveMergedOptions,
-  isInBeforeCreate
+  isInBeforeCreate,
+  UnwrapAsyncBindings
 } from './componentOptions'
 import { EmitsOptions, EmitFn } from './componentEmits'
 import { Slots } from './componentSlots'
@@ -168,7 +169,7 @@ export type ComponentPublicInstance<
     options?: WatchOptions
   ): WatchStopHandle
 } & P &
-  ShallowUnwrapRef<B> &
+  ShallowUnwrapRef<UnwrapAsyncBindings<B>> &
   D &
   ExtractComputedReturns<C> &
   M &

diff --git a/test-dts/defineComponent.test-d.tsx b/test-dts/defineComponent.test-d.tsx
@@ -864,3 +864,39 @@ describe('extract instance type', () => {
   //  @ts-expect-error
   expectError((compA.baseA = 1))
 })
+
+describe('async setup', () => {
+  type GT = string & { __brand: unknown }
+  const Comp = defineComponent({
+    async setup() {
+      // setup context
+      return {
+        a: ref(1),
+        b: {
+          c: ref('hi')
+        },
+        d: reactive({
+          e: ref('hello' as GT)
+        })
+      }
+    },
+    render() {
+      // assert setup context unwrapping
+      expectType<number>(this.a)
+      expectType<string>(this.b.c.value)
+      expectType<GT>(this.d.e)
+
+      // setup context properties should be mutable
+      this.a = 2
+    }
+  })
+
+  const vm = {} as InstanceType<typeof Comp>
+  // assert setup context unwrapping
+  expectType<number>(vm.a)
+  expectType<string>(vm.b.c.value)
+  expectType<GT>(vm.d.e)
+
+  // setup context properties should be mutable
+  vm.a = 2
+})