fix(types): component type check when props is an empty object

vuejs · Dec 27, 2022 · cefe1f2 · cefe1f2
1 parent fe77e2b
commit cefe1f2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
@@ -170,9 +170,9 @@ export function defineComponent<
 export function defineComponent<
   // the Readonly constraint allows TS to treat the type of { required: true }
   // as constant instead of boolean.
-  PropsOptions extends Readonly<ComponentPropsOptions>,
-  RawBindings,
-  D,
+  PropsOptions extends Readonly<ComponentPropsOptions> = {},
+  RawBindings = {},
+  D = {},
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
   Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,

diff --git a/test-dts/defineComponent.test-d.tsx b/test-dts/defineComponent.test-d.tsx
@@ -482,6 +482,26 @@ describe('type inference w/ options API', () => {
   })
 })
 
+// #4051
+describe('type inference w/ empty prop object', () => {
+  const MyComponent = defineComponent({
+    props: {},
+    setup(props) {
+      return {}
+    },
+    render() {}
+  })
+  expectType<JSX.Element>(<MyComponent />)
+  // AllowedComponentProps
+  expectType<JSX.Element>(<MyComponent class={'foo'} />)
+  // ComponentCustomProps
+  expectType<JSX.Element>(<MyComponent custom={1} />)
+  // VNodeProps
+  expectType<JSX.Element>(<MyComponent key="1" />)
+  // @ts-expect-error
+  expectError(<MyComponent other="other" />)
+})
+
 describe('with mixins', () => {
   const MixinA = defineComponent({
     emits: ['bar'],
@@ -1041,13 +1061,13 @@ describe('inject', () => {
     },
     inject: {
       foo: 'foo',
-      bar: 'bar',
+      bar: 'bar'
     },
     created() {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError(this.foobar = 1)
+      expectError((this.foobar = 1))
     }
   })
 
@@ -1059,7 +1079,7 @@ describe('inject', () => {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError(this.foobar = 1)
+      expectError((this.foobar = 1))
     }
   })
 
@@ -1073,13 +1093,13 @@ describe('inject', () => {
       bar: {
         from: 'pbar',
         default: 'bar'
-      },
+      }
     },
     created() {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
-      expectError(this.foobar = 1)
+      expectError((this.foobar = 1))
     }
   })
 
@@ -1088,9 +1108,9 @@ describe('inject', () => {
     props: ['a', 'b'],
     created() {
       //  @ts-expect-error
-      expectError(this.foo = 1)
+      expectError((this.foo = 1))
       //  @ts-expect-error
-      expectError(this.bar = 1)
+      expectError((this.bar = 1))
     }
   })
 })