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) {