fix(types): incorrect type inference of array (#4578)

Author: Amour1688

packages/runtime-core/src/apiDefineComponent.ts

@@ -41,7 +41,11 @@ export type DefineComponent<
   E extends EmitsOptions = {},
   EE extends string = string,
   PP = PublicProps,
-  Props = Readonly<ExtractPropTypes<PropsOrPropOptions>> &
+  Props = Readonly<
+    PropsOrPropOptions extends ComponentPropsOptions
+      ? ExtractPropTypes<PropsOrPropOptions>
+      : PropsOrPropOptions
+  > &
     ({} extends E ? {} : EmitsToProps<E>),
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>
 > = ComponentPublicInstanceConstructor<

test-dts/defineComponent.test-d.tsx

@@ -333,35 +333,31 @@ describe('with object props', () => {
   })
 })
 
-// describe('type inference w/ optional props declaration', () => {
-//   const MyComponent = defineComponent({
-//     setup(_props: { msg: string }) {
-//       return {
-//         a: 1
-//       }
-//     },
-//     render() {
-//       expectType<string>(this.$props.msg)
-//       // props should be readonly
-//       expectError((this.$props.msg = 'foo'))
-//       // should not expose on `this`
-//       expectError(this.msg)
-//       expectType<number>(this.a)
-//       return null
-//     }
-//   })
-
-//   expectType<JSX.Element>(<MyComponent msg="foo" />)
-//   expectError(<MyComponent />)
-//   expectError(<MyComponent msg={1} />)
-// })
-
-// describe('type inference w/ direct setup function', () => {
-//   const MyComponent = defineComponent((_props: { msg: string }) => {})
-//   expectType<JSX.Element>(<MyComponent msg="foo" />)
-//   expectError(<MyComponent />)
-//   expectError(<MyComponent msg={1} />)
-// })
+describe('type inference w/ optional props declaration', () => {
+  const MyComponent = defineComponent<{ a: string[]; msg: string }>({
+    setup(props) {
+      expectType<string>(props.msg)
+      expectType<string[]>(props.a)
+      return {
+        b: 1
+      }
+    }
+  })
+
+  expectType<JSX.Element>(<MyComponent msg="1" a={['1']} />)
+  // @ts-expect-error
+  expectError(<MyComponent />)
+  // @ts-expect-error
+  expectError(<MyComponent msg="1" />)
+})
+
+describe('type inference w/ direct setup function', () => {
+  const MyComponent = defineComponent((_props: { msg: string }) => {})
+  expectType<JSX.Element>(<MyComponent msg="foo" />)
+  // @ts-expect-error
+  expectError(<MyComponent />)
+  expectError(<MyComponent msg="1" />)
+})
 
 describe('type inference w/ array props declaration', () => {
   const MyComponent = defineComponent({