fix(compiler-sfc): props type should not be optional when setup default value

Author: webfansplz

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -1037,11 +1037,13 @@ import { defaults } from './foo'
 export default /*#__PURE__*/_defineComponent({
   props: _mergeDefaults({
     foo: { type: String, required: false },
-    bar: { type: Number, required: false }
+    bar: { type: Number, required: false },
+    baz: { type: Boolean, required: true }
   }, { ...defaults }) as unknown as undefined,
   setup(__props: {
         foo?: string
         bar?: number
+        baz: boolean
       }, { expose }) {
   expose()
 
@@ -1060,11 +1062,13 @@ exports[`SFC compile <script setup> with TypeScript withDefaults (static) 1`] =
 export default /*#__PURE__*/_defineComponent({
   props: {
     foo: { type: String, required: false, default: 'hi' },
-    bar: { type: Number, required: false }
+    bar: { type: Number, required: false },
+    baz: { type: Boolean, required: true }
   } as unknown as undefined,
   setup(__props: {
-        foo?: string
+        foo: string
         bar?: number
+        baz: boolean
       }, { expose }) {
   expose()
 

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -800,6 +800,7 @@ const emit = defineEmits(['a', 'b'])
       const props = withDefaults(defineProps<{
         foo?: string
         bar?: number
+        baz: boolean
       }>(), {
         foo: 'hi'
       })
@@ -810,10 +811,17 @@ const emit = defineEmits(['a', 'b'])
         `foo: { type: String, required: false, default: 'hi' }`
       )
       expect(content).toMatch(`bar: { type: Number, required: false }`)
+      expect(content).toMatch(`baz: { type: Boolean, required: true }`)
+      expect(content).toMatch(`{
+        foo: string
+        bar?: number
+        baz: boolean
+      }`)
       expect(content).toMatch(`const props = __props`)
       expect(bindings).toStrictEqual({
         foo: BindingTypes.PROPS,
         bar: BindingTypes.PROPS,
+        baz: BindingTypes.PROPS,
         props: BindingTypes.SETUP_CONST
       })
     })
@@ -825,6 +833,7 @@ const emit = defineEmits(['a', 'b'])
       const props = withDefaults(defineProps<{
         foo?: string
         bar?: number
+        baz: boolean
       }>(), { ...defaults })
       </script>
       `)
@@ -834,7 +843,8 @@ const emit = defineEmits(['a', 'b'])
         `
   _mergeDefaults({
     foo: { type: String, required: false },
-    bar: { type: Number, required: false }
+    bar: { type: Number, required: false },
+    baz: { type: Boolean, required: true }
   }, { ...defaults })`.trim()
       )
     })

packages/compiler-sfc/src/compileScript.ts

@@ -572,6 +572,36 @@ export function compileScript(
     return `\n  props: ${propsDecls} as unknown as undefined,`
   }
 
+  function genSetupPropsArgs(
+    props: Record<string, PropTypeData>,
+    propsArgs: string
+  ) {
+    const keys = Object.keys(props)
+    if (!keys.length) {
+      return ``
+    }
+    const hasStaticDefaults =
+      propsRuntimeDefaults &&
+      propsRuntimeDefaults.type === 'ObjectExpression' &&
+      propsRuntimeDefaults.properties.every(
+        node => node.type === 'ObjectProperty' && !node.computed
+      )
+    keys.map(key => {
+      if (hasStaticDefaults) {
+        const prop = (propsRuntimeDefaults as ObjectExpression).properties.find(
+          (node: any) => node.key.name === key
+        ) as ObjectProperty
+        if (prop) {
+          const { required } = props[key]
+          if (!required) {
+            propsArgs = propsArgs.replace(`${key}?`, key)
+          }
+        }
+      }
+    })
+    return `: ${propsArgs}`
+  }
+
   // 1. process normal <script> first if it exists
   let scriptAst
   if (script) {
@@ -990,10 +1020,11 @@ export function compileScript(
   // 9. finalize setup() argument signature
   let args = `__props`
   if (propsTypeDecl) {
-    args += `: ${scriptSetup.content.slice(
+    const propsArgs = `${scriptSetup.content.slice(
       propsTypeDecl.start!,
       propsTypeDecl.end!
     )}`
+    args += genSetupPropsArgs(typeDeclaredProps, propsArgs)
   }
   // inject user assignment of props
   // we use a default __props so that template expressions referencing props