像专业人士一样验证你的Vue道具

Vue要求明确声明传递给组件的任何数据为props。此外，它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的契约一样，确保组件按预期使用。

让我们来探讨一下这个强大的工具，它可以帮助我们在开发和调试过程中减少错误并增加我们的信心。

基础知识

验证原始类型就像在原始类型构造函数中设置类型选项一样简单。

复杂类型也可以用同样的方法进行验证。

type ，可以是下列数值之一。

此外，type ，也可以是一个自定义类或构造函数，断言将用instanceof 检查。例如，给定下面的类。

你可以像这样把它作为一个道具类型。

道具支持验证器函数的使用。这个函数接受道具的原始值，并且必须返回一个布尔值来确定这个道具是否有效。

有时你想把数值缩小到一个特定的集合，这可以通过伪造这样的枚举来实现。

这可以被导入并用于验证器和作为默认值。

最后，父级组件也可以导入并使用这个枚举，从而消除了我们应用程序中对魔法字符串的使用。

ℹ️ 符号是定义枚举值的另一种方式，当不需要转换为字符串时。[例子]

布尔型道具有独特的行为。属性的存在与否可以决定道具的值。

将Vue内置的道具验证与TypeScript相结合，可以让我们对这个机制有更多的控制，因为TypeScript原生支持接口和枚举。

我们可以使用一个接口和PropType 工具来注释复杂的道具类型。这保证了传递的对象会有一个特定的结构。

我们已经探讨了如何在Javascript中伪造一个枚举。这对于TypeScript来说是不需要的，因为枚举是本地支持的。

上述所有内容在使用Vue 3的Options或Composition API时都有效。不同的是，当使用<script setup>. ，道具必须使用defineProps() 宏来声明，像这样。

或者当使用TypeScript与<script setup>，可以使用纯类型注释来声明道具。

或者使用一个接口。

最后，使用基于类型的声明时，声明默认值。

随着你的应用程序规模的扩大，类型检查是防止错误的第一道防线。Vue的内置道具验证很有说服力。结合TypeScript，它可以让你对正确使用组件接口有很高的信心，减少bug，提高整体代码质量和开发体验。