Vue 3：带有 Validator 的 prop => TypeScript 错误声明其他 prop 不存在

Question

在 Vue (v3) 中添加带有 a 的 propvalidator会导致 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函数 insetup会产生类似的结果（然后抱怨它this.someProp不存在，即使它在运行时存在）。

为什么会出现这个错误？我们如何预测这种行为？还validator支持吗？

当前的解决方法：我放弃了validator。

Answer 1

将类型添加到validator参数：

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