javascript - Vue 3 : prop with Validator => TypeScript Error Claiming Other prop Does not Exist

Question

在 Vue (v3) 中添加一个带有 validator 的 Prop 导致 TypeScript 错误，声称另一个属性不存在。我创建了一个组件来说明问题:
这有效:

<template>
  <div>{{myComputed}}</div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    someProp: String
  },
  setup(props) {
    return {
      myComputed: computed(() => ('ABC_' + props.someProp + '_XYZ'))
    };
  }
});
</script>

现在我们添加 otherProp与 validator :

<template>
  <div>{{myComputed}}</div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    someProp: String,
    otherProp: {
      type: String,
      default: '',
      validator: (v) => (true) // <- Problem occurs when
                               //    adding this line
    }
  },
  setup(props) {
    return {
      myComputed: computed(() => ('ABC_' + props.someProp + '_XYZ'))
      // Complains that `props.someProp` --^
      // is not defined here
    };
  }
});
</script>

我们收到此消息的错误:

ERROR in src/components/MyComponent.vue:21:50
TS2339: Property 'someProp' does not exist on type 'Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 17 more ...; flat?: unknown[] | undefined; }> | Readonly<...>>>'.
    19 |   setup(props) {
    20 |     return {
  > 21 |       myComputed: computed(() => ('ABC_' + props.someProp + '_XYZ'))
       |                                                  ^^^^^^^^
    22 |       // Complains that `props.someProp` --^
    23 |       // is not defined here
    24 |     };

使用 computed对象而不是 computed setup中的函数产生类似的结果(然后提示 this.someProp 不存在，即使它在运行时存在)。
为什么会出现这个错误？我们怎么能预测到这种行为？是 validator还支持吗？
当前解决方法:我放弃了 validator .

Answer 1

将类型添加到 validator范围 :

otherProp: {
  type: String,
  default: '',
  validator: (v:string) => (true)
                // ^-----------
}