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

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

@@ -96,6 +96,23 @@ return () => {}
 }"
 `;
 
+exports[`sfc props transform > default values w/ type declaration & key is string 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    foo: { type: Number, required: true, default: 1 }
+  },
+  setup(__props: any) {
+
+
+
+return () => {}
+}
+
+})"
+`;
+
 exports[`sfc props transform > default values w/ type declaration 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 

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

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

packages/compiler-sfc/src/compileScript.ts

@@ -1889,17 +1889,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`]
       }