validation - Vue Prop 类型验证对象模式

Question

在 React 中，您可以将 Prop 定义为一个对象，然后还可以定义该对象属性的类型，即形状。在 Vue 中，检查对象是否具有特定形状的唯一方法似乎是使用验证器函数。这是目前推荐的策略吗？我确定我可以使用其他库来处理该验证，但看起来 Vue 应该能够处理。

Answer 1

仅 TypeScript 解决方案的问题在于它仅在编译时检查类型并且仅限于类型检查。如果您要传递动态对象或需要额外的数据约束，这在运行时 对您没有帮助。

我最近发现了一个用于运行时验证的库，但它不太适合与 Vue 2.x 或 Babel 编译器一起使用，因为它使用 JavaScript 保留字作为函数名称。因此，我 fork 了该项目，重构了代码以同时支持 TypeScript 和 JavaScript，并专门添加了一个 asSuccess() 函数来支持 VueJS 对象属性的验证。

所以如果你有一个 TypeScript 接口(interface)，比如......

interface Pet {
  name: string;
  species: string;
  age?: number;
  isCute?: boolean;
}

您可以使用 JavaScript 或 TypeScript 代码验证 Pet 属性...

import { tObject, tString, tNumber, tBoolean, optional } from 'runtime-validator'

// VueJs component
export default {
  name: 'MyPet',
  props: {
    pet: {
      type: Object,
      required: true,
      validator: tObject({
        name: tString(),
        species: tString(),
        age: optional(tNumber()),
        isCute: optional(tBoolean())
      }).asSuccess
    }
  },
  ...
}

tObject() 将接受具有已定义字段的附加字段的对象。如果您需要禁止其他字段，请使用 tObjectStrict()。

您还可以添加值约束...

export default {
  name: 'MyPet',
  props: {
    pet: {
      type: Object,
      required: true,
      validator: tObject({
        name: tString(),
        species: oneOf("cat", "dog", "bird"),
        age: optional(range(0, 150)),
        isCute: optional(tBoolean())
      }).asSuccess
    }
  },
  ...
}

它比属性具有更广泛的应用，因为它还可以用于单元测试、vuex 操作和突变、服务器端有效负载等中的数据验证。

完整文档在这里...

• https://github.com/tohagan/runtime-validation/