feat(compiler-sfc): Support props name to be defined as a string

Author: baiwusanyu-c

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

@@ -99,6 +99,18 @@ describe('sfc props transform', () => {
     assertCode(content)
   })
 
+  test('default values w/ type declaration & key is string', () => {
+    const { content } = compile(`
+      <script setup lang="ts">
+      const { foo = 1 } = defineProps<{ "foo": number }>()
+      </script>
+    `)
+    expect(content).toMatch(`props: {
+    "foo": { type: Number, required: false, default: 1 },
+  }`)
+    assertCode(content)
+  })
+
   test('default values w/ type declaration, prod mode', () => {
     const { content } = compile(
       `

packages/compiler-sfc/src/compileScript.ts

@@ -871,7 +871,8 @@ export function compileScript(
   }
 
   function genDestructuredDefaultValue(key: string): string | undefined {
-    const destructured = propsDestructuredBindings[key]
+    const rawKey = key.startsWith('"') && key.endsWith('"') ? key.split('"')[1] : key
+    const destructured = propsDestructuredBindings[rawKey]
     if (destructured && destructured.default) {
       const value = scriptSetup!.content.slice(
         destructured.default.start!,
@@ -1889,17 +1890,22 @@ function extractRuntimeProps(
   const members = node.type === 'TSTypeLiteral' ? node.members : node.body
   for (const m of members) {
     if (
-      (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
-      m.key.type === 'Identifier'
+        (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
+        (m.key.type === 'Identifier' || m.key.type === 'StringLiteral')
     ) {
-      let type
+      let type, keyName;
+      if(m.key.type === 'StringLiteral'){
+        keyName = `"${m.key.value}"`
+      } else {
+        keyName = m.key.name
+      }
       if (m.type === 'TSMethodSignature') {
         type = ['Function']
       } else if (m.typeAnnotation) {
         type = inferRuntimeType(m.typeAnnotation.typeAnnotation, declaredTypes)
       }
-      props[m.key.name] = {
-        key: m.key.name,
+      props[keyName] = {
+        key: keyName,
         required: !m.optional,
         type: type || [`null`]
       }