fix(types): support inferring inject in mixins

packages/dts-test/defineComponent.test-d.tsx

@@ -10,7 +10,7 @@ import {
   SetupContext,
   h
 } from 'vue'
-import { describe, expectType, IsUnion } from './utils'
+import { describe, expectType, IsUnion, test } from './utils'
 
 describe('with object props', () => {
   interface ExpectedProps {
@@ -1027,64 +1027,208 @@ describe('emits', () => {
 })
 
 describe('inject', () => {
-  // with object inject
-  defineComponent({
-    props: {
-      a: String
-    },
-    inject: {
-      foo: 'foo',
-      bar: 'bar'
-    },
-    created() {
-      expectType<unknown>(this.foo)
-      expectType<unknown>(this.bar)
-      //  @ts-expect-error
-      this.foobar = 1
-    }
+  test('with object inject', () => {
+    defineComponent({
+      props: {
+        a: String
+      },
+      inject: {
+        foo: 'foo',
+        bar: 'bar'
+      },
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+        //  @ts-expect-error
+        this.foobar = 1
+      }
+    })
   })
 
-  // with array inject
-  defineComponent({
-    props: ['a', 'b'],
-    inject: ['foo', 'bar'],
-    created() {
-      expectType<unknown>(this.foo)
-      expectType<unknown>(this.bar)
-      //  @ts-expect-error
-      this.foobar = 1
-    }
+  test('with array inject', () => {
+    defineComponent({
+      props: ['a', 'b'],
+      inject: ['foo', 'bar'],
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+        //  @ts-expect-error
+        this.foobar = 1
+      }
+    })
   })
 
-  // with no props
-  defineComponent({
-    inject: {
-      foo: {
-        from: 'pfoo',
-        default: 'foo'
+  test('with no props', () => {
+    defineComponent({
+      inject: {
+        foo: {
+          from: 'pfoo',
+          default: 'foo'
+        },
+        bar: {
+          from: 'pbar',
+          default: 'bar'
+        }
       },
-      bar: {
-        from: 'pbar',
-        default: 'bar'
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+        //  @ts-expect-error
+        this.foobar = 1
       }
-    },
-    created() {
-      expectType<unknown>(this.foo)
-      expectType<unknown>(this.bar)
-      //  @ts-expect-error
-      this.foobar = 1
-    }
+    })
   })
 
-  // without inject
-  defineComponent({
-    props: ['a', 'b'],
-    created() {
-      //  @ts-expect-error
-      this.foo = 1
-      //  @ts-expect-error
-      this.bar = 1
-    }
+  test('without inject', () => {
+    defineComponent({
+      props: ['a', 'b'],
+      created() {
+        //  @ts-expect-error
+        this.foo = 1
+        //  @ts-expect-error
+        this.bar = 1
+      }
+    })
+  })
+
+  test('define mixins w/ no props', () => {
+    const MixinA = defineComponent({
+      inject: {
+        foo: 'foo'
+      }
+    })
+    const MixinB = defineComponent({
+      inject: ['bar']
+    })
+    // with no props
+    defineComponent({
+      mixins: [MixinA, MixinB],
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+      }
+    })
+    // with object props
+    defineComponent({
+      mixins: [MixinA, MixinB],
+      props: {
+        baz: {
+          type: Number,
+          required: true
+        }
+      },
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+        expectType<number>(this.baz)
+      }
+    })
+    // with array props
+    defineComponent({
+      mixins: [MixinA, MixinB],
+      props: ['baz'],
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+        expectType<any>(this.baz)
+      }
+    })
+  })
+
+  test('define mixins w/ object props', () => {
+    const MixinA = defineComponent({
+      props: {
+        a: String
+      },
+      inject: {
+        foo: 'foo'
+      }
+    })
+    const MixinB = defineComponent({
+      props: {
+        b: String
+      },
+      inject: ['bar']
+    })
+    // with no props
+    defineComponent({
+      mixins: [MixinA, MixinB],
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+      }
+    })
+    // with object props
+    defineComponent({
+      mixins: [MixinA, MixinB],
+      props: {
+        baz: {
+          type: Number,
+          required: true
+        }
+      },
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+        expectType<number>(this.baz)
+      }
+    })
+    // with array props
+    defineComponent({
+      mixins: [MixinA, MixinB],
+      props: ['baz'],
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+        expectType<any>(this.baz)
+      }
+    })
+  })
+
+  test('define mixins w/ array props', () => {
+    const MixinA = defineComponent({
+      props: ['a'],
+      inject: {
+        foo: 'foo'
+      }
+    })
+    const MixinB = defineComponent({
+      props: ['b'],
+      inject: ['bar']
+    })
+    // with no props
+    defineComponent({
+      mixins: [MixinA, MixinB],
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+      }
+    })
+    // with object props
+    defineComponent({
+      mixins: [MixinA, MixinB],
+      props: {
+        baz: {
+          type: Number,
+          required: true
+        }
+      },
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+        expectType<number>(this.baz)
+      }
+    })
+    // with array props
+    defineComponent({
+      mixins: [MixinA, MixinB],
+      props: ['baz'],
+      created() {
+        expectType<unknown>(this.foo)
+        expectType<unknown>(this.bar)
+        expectType<any>(this.baz)
+      }
+    })
   })
 })
 
@@ -1294,6 +1438,8 @@ declare const MyButton: DefineComponent<
   string,
   VNodeProps & AllowedComponentProps & ComponentCustomProps,
   Readonly<ExtractPropTypes<{}>>,
-  {}
+  {},
+  {},
+  string
 >
 ;<MyButton class="x" />

packages/runtime-core/src/apiDefineComponent.ts

@@ -31,6 +31,16 @@ export type PublicProps = VNodeProps &
   AllowedComponentProps &
   ComponentCustomProps
 
+type PropsEmits<
+  PropsOrPropOptions = {},
+  Emits extends EmitsOptions = {}
+> = Readonly<
+  PropsOrPropOptions extends ComponentPropsOptions
+    ? ExtractPropTypes<PropsOrPropOptions>
+    : PropsOrPropOptions
+> &
+  ({} extends Emits ? {} : EmitsToProps<Emits>)
+
 export type DefineComponent<
   PropsOrPropOptions = {},
   RawBindings = {},
@@ -42,13 +52,10 @@ export type DefineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   PP = PublicProps,
-  Props = Readonly<
-    PropsOrPropOptions extends ComponentPropsOptions
-      ? ExtractPropTypes<PropsOrPropOptions>
-      : PropsOrPropOptions
-  > &
-    ({} extends E ? {} : EmitsToProps<E>),
-  Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>
+  Props = PropsEmits<PropsOrPropOptions, E>,
+  Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
+  I extends ComponentInjectOptions = {},
+  II extends string = string
 > = ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
     Props,
@@ -61,7 +68,8 @@ export type DefineComponent<
     E,
     PP & Props,
     Defaults,
-    true
+    true,
+    I
   > &
     Props
 > &
@@ -75,7 +83,9 @@ export type DefineComponent<
     Extends,
     E,
     EE,
-    Defaults
+    Defaults,
+    I,
+    II
   > &
   PP
 
@@ -122,7 +132,22 @@ export function defineComponent<
     I,
     II
   >
-): DefineComponent<Props, RawBindings, D, C, M, Mixin, Extends, E, EE>
+): DefineComponent<
+  Props,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE,
+  PublicProps,
+  PropsEmits<Props, E>,
+  ExtractDefaultPropTypes<Props>,
+  I,
+  II
+>
 
 // overload 3: object format with array props declaration
 // props inferred as { [key in PropNames]?: any }
@@ -162,7 +187,12 @@ export function defineComponent<
   Mixin,
   Extends,
   E,
-  EE
+  EE,
+  PublicProps,
+  PropsEmits<Readonly<{ [key in PropNames]?: any }>, E>,
+  ExtractDefaultPropTypes<Readonly<{ [key in PropNames]?: any }>>,
+  I,
+  II
 >
 
 // overload 4: object format with object props declaration
@@ -195,7 +225,22 @@ export function defineComponent<
     I,
     II
   >
-): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>
+): DefineComponent<
+  PropsOptions,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE,
+  PublicProps,
+  PropsEmits<PropsOptions, E>,
+  ExtractDefaultPropTypes<PropsOptions>,
+  I,
+  II
+>
 
 // implementation, close to no-op
 export function defineComponent(options: unknown) {

packages/runtime-core/src/componentOptions.ts

@@ -552,22 +552,31 @@ export type MergedComponentOptionsOverride = {
   errorCaptured?: MergedHook<ErrorCapturedHook>
 }
 
-export type OptionTypesKeys = 'P' | 'B' | 'D' | 'C' | 'M' | 'Defaults'
+export type OptionTypesKeys =
+  | 'P'
+  | 'B'
+  | 'D'
+  | 'C'
+  | 'M'
+  | 'Defaults'
+  | 'Inject'
 
 export type OptionTypesType<
   P = {},
   B = {},
   D = {},
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
-  Defaults = {}
+  Defaults = {},
+  Inject extends ComponentInjectOptions = {}
 > = {
   P: P
   B: B
   D: D
   C: C
   M: M
   Defaults: Defaults
+  Inject: Inject
 }
 
 const enum OptionTypes {

packages/runtime-core/src/componentPublicInstance.ts

@@ -88,9 +88,19 @@ type MixinToOptionTypes<T> = T extends ComponentOptionsBase<
   infer Extends,
   any,
   any,
-  infer Defaults
+  infer Defaults,
+  infer Inject,
+  any
 >
-  ? OptionTypesType<P & {}, B & {}, D & {}, C & {}, M & {}, Defaults & {}> &
+  ? OptionTypesType<
+      P & {},
+      B & {},
+      D & {},
+      C & {},
+      M & {},
+      Defaults & {},
+      Inject & {}
+    > &
       IntersectionMixin<Mixin> &
       IntersectionMixin<Extends>
   : never
@@ -153,7 +163,12 @@ export type CreateComponentPublicInstance<
   PublicM extends MethodOptions = UnwrapMixinsType<PublicMixin, 'M'> &
     EnsureNonVoid<M>,
   PublicDefaults = UnwrapMixinsType<PublicMixin, 'Defaults'> &
-    EnsureNonVoid<Defaults>
+    EnsureNonVoid<Defaults>,
+  PublicInject extends ComponentInjectOptions = UnwrapMixinsType<
+    PublicMixin,
+    'Inject'
+  > &
+    EnsureNonVoid<I>
 > = ComponentPublicInstance<
   PublicP,
   PublicB,
@@ -165,7 +180,7 @@ export type CreateComponentPublicInstance<
   PublicDefaults,
   MakeDefaultsOptional,
   ComponentOptionsBase<P, B, D, C, M, Mixin, Extends, E, string, Defaults>,
-  I
+  PublicInject
 >
 
 // public properties exposed on the proxy, which is used as the render context