Vue 3：带有验证器的道具 => 声称其他道具不存在的 TypeScript 错误答案

【问题标题】：Vue 3: prop with Validator => TypeScript Error Claiming Other prop Does not ExistVue 3：带有验证器的道具 => 声称其他道具不存在的 TypeScript 错误
【发布时间】：2021-09-07 15:26:31
【问题描述】：

在 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 |     };

在setup 中使用computed 对象而不是computed 函数会产生类似的结果（然后抱怨this.someProp 不存在，即使它在运行时存在）。

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

当前解决方法：我删除了validator。

【问题讨论】：

标签： javascript typescript vue.js vuejs3

【解决方案1】：

将类型添加到validator参数：

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

【讨论】：

这行得通。花了很多时间才发现问题出在一些未提及的属性validator 上，我之前没有尝试过。谢谢。
至于@tony，它只适用于箭头函数。这不起作用：validator: function(v:string) { return true; }.