针对 TypeScript 的类型的 props 问题

[denzw]

当前项目使用类型props声明，在使用 v-model 时基于类型声明的props无法正常工作。
具体代码如下
https://sfc.vuejs.org/#__DEV__eNrtVMFunDAQ/RWHC0RaoEqkSnXZbdqqlXqpemkvpQcWhsQJ2JZtNl0h/r2DDayz3USJ1GMvyJ4Zz3sz84Y+eC9lsusgoEGmS8WkIU3Br9d5YHQeEA2mk5ucE8JaKZQhPVFQk4HUSrQkxIeh5/woWjl5knS8jJn9gK9CjWaxBE2GJa4UXBuyK5oO1ggU1UWj4TznWerIIRW8GGhlUxiwxEhWsZ07uTMpm0JrrKCTFQblwexEt2W4i1tRQYMRFggDMsvWi1uInoqdnQtoesTAS6RlwTf2KcUaxsuRr++tdxgeug8551OWemXjVZt94zqQuEJ79/SeVeaGXrx+JX+/dZaKaXy3p3UDoyk3uSkads1jhhk1JSVwA2ry3HbasHof4yQM2ilBViXEWzD3ANxmHOw8LHywCtxo47aQya0WHIVkieSTA1VEyUQNmzi2kOLhxhipaZp2XN5dJ6Vo0yv0parjhrUQV6K9ukwukss3WL02vj0B3cZbJe41KETMg5WXPEXjDlSsgFegQD0JdhT7APDI9xfo1IcBGzAL+PkrhAxkZ6BaebvkLdM4jRqbTr4pIfXcPKvDH1ZJWyEaKNww8KHg360A6CEkpBHKag48X292glXz8OY1kzb9mlRQMw4WLLPfTYQrN0dBy8wS9AkvOkNGo1RyEwEloVOfD75yG0zJjE/JhJ+bAZNbIi77TaEdeYSY2xJFSJicnVl+P0+W98sSrDteGiY4cRSi86lVI+XoJC+XMznYbB4n6Md+MHajUV/2X7PtjEHAq7Jh5Z3/j/kyTy1LXcy0yfZ13y91viPhcg5pyAWHkIzb/8S+o8i8H+W/0tmjIoimNvqS++AmOe3aacl9nsZhW/pfQS9VEI64LZoXyMcO69kaGv4AQ7i0Lw==

希望在接口声明时支持 "onUpdate:visible"?: (val: boolean) => void 这样定义。
经过查看源码，在 vue-core/packages/compiler-sfc/src/compileScript.ts 的 extractRuntimeProps 增加 StringLiteral 适配就可以了。不知道官方能否提供支持

修改后的方法：

function extractRuntimeProps(
  node: TSTypeLiteral | TSInterfaceBody,
  props: Record<string, PropTypeData>,
  declaredTypes: Record<string, string[]>,
  isProd: boolean
) {
  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.key.type === 'StringLiteral')
    ) {
      let type, keyName;

      if(m.key.type === 'StringLiteral'){
        keyName = m.key.extra.raw
      } else {
        keyName = m.key.name
      }

      if (m.type === 'TSMethodSignature') {
        type = ['Function']
      } else if (m.typeAnnotation) {
        type = inferRuntimeType(m.typeAnnotation.typeAnnotation, declaredTypes)
      }
      props[keyName] = {
        key: keyName,
        required: !m.optional,
        type: type || [`null`]
      }
    }
  }
}

[sxzz]

暂时可以通过 Vue Macros 来解决。
You can use Vue Macros to fix that temporally.
https://vue-macros.sxzz.moe/features/better-define.html

Relate PR: #7803

[MZ-Dlovely]

const hasUpdate = computed(()=> !!props['onUpdate:modelValue'])

是什么鬼畜用法？emmm，为什么不正常地使用

const hasUpdate = computed(()=> !!props.modelValue)

呢？

[chenxch]

这明显是2个东西😂

[MZ-Dlovely]

• 从语义上理解的话，hasUpdate是表示更新的状态，对应的应该是双向绑定的控件modelValue才对
• 从命名方式看的话，on开头的应该表示监听的事件，不应该出现在props里

[chenxch]

还是好好看看文档吧
https://cn.vuejs.org/guide/extras/render-function.html#v-model

[MZ-Dlovely]

文档我都有看啊，我说的有什么问题吗？