验证VueProps类型，这几种方式你可能还没试用过

　　vue要求任何传递给组件的数据，都要声明为props。此外，它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的契约一样，确保组件按预期使用。
　　这节课我们来看下这个验证机制，它可以帮助我们在开发和调试过程中减少but，增加我们的自信心（摸鱼时间）。基础原始类型
　　验证基本类型比较简单，这里我们不过多的介绍，直接看下面例子：exportdefault｛props：｛Basictypecheck（null和undefined值允许任何类型）propA：Number，多种可能的类型propB：〔String，Number〕，必传的参数propC：｛type：String，required：true｝，默认值propD：｛type：Number，default：100｝，｝｝复杂类型
　　复杂类型也可以用同样的方式进行验证。exportdefault｛props：｛默认值的对象propE：｛type：Object，对象或数组的默认值必须从一个工厂函数返回。该函数接收原始元素作为参数。default（rawProps）｛return｛message：hello｝｝｝，数组默认值propF：｛type：Array，default（）｛return〔〕｝｝，函数默认值propG：｛type：Function，不像对象或数组的默认值。这不是一个工厂函数这是一个作为默认值的函数default（）｛returnDefaultfunction｝｝｝｝
　　type可以是以下之一：NumberStringBooleanArrayObjectDateFunctionSymbol
　　此外，type也可以是一个自定义的类或构造函数，然后使用instanceof进行检查。例如，给定下面的类：classPerson｛constructor（firstName，lastName）｛this。firstNamefirstNamethis。lastNamelastName｝｝
　　我们可以把Person作为一个类型传递给prop类型：exportdefault｛props：｛author：Person｝｝高级验证validator方法
　　Props支持使用一个validator函数。这个函数接受prop原始值，并且必须返回一个布尔值来确定这个prop是否有效。prop：｛validator（value）｛Thevaluemustmatchoneofthesestringsreturn〔success，warning，danger〕。includes（value）｝｝使用枚举
　　有时我们想把值缩小到一个特定的集合，这可以通过枚举来实现：exportconstPositionObject。freeze（｛TOP：top，RIGHT：right，BOTTOM：bottom，LEFT：left｝）；
　　它可以导入validator中使用，也可以作为默认值：templatespan：classarrowposition｛position｝｛｛position｝｝spantemplate
　　最后，父级组件也可以导入并使用这个枚举，它消除了我们应用程序中对魔法字符串的使用：templateDropDownComponent：positionPosition。BOTTOMtemplate布尔映射
　　布尔类有独特的行为。属性的存在或不存在可以决定prop的值。！等价于：disabledtrueMyComponentdisabled！价于：disabledfalseMyComponentTypeScript
　　将Vue的内置prop验证与TypeScript相结合，可以让我们对这一机制有更多的控制，因为TypeScript原生支持接口和枚举。Interface
　　我们可以使用一个接口和PropType来注解复杂的prop类型。这确保了传递的对象将有一个特定的结构。枚举
　　我们已经探讨了如何在JS中伪造一个枚举。这对于TypeScript来说是不需要的，它本向就支持了：Vue3
　　上述所有内容在使用Vue3与选项API或组合API时都有效。区别在于使用codepre
　　或者在使用TypeScript的codepre
　　或者使用一个接口：
　　最后，在使用基于类型的声明时，声明默认值。总结
　　随着应用程序规模的扩大，类型检查是防止错误的第一道防线。结合TypeScript，它可以让你对正确使用组件接口有很高的信心，减少bug，提高整体代码质量和开发体验。
　　作者：FotisAdamakis译者：前端小智来源：mediun原文：https：fadamakis。mdium。comvalidatingyurvuepropslikeapro5a2d0ed2b2d6