验证VueProps类型，这些方法你可能没试过！

vue要求传递给组件的任何数据都声明为props。此外，它还提供了一个强大的内置机制来验证此类数据。这就像组件和消费者之间的合同一样，确保组件按预期使用。本节课，我们就来看看这个验证机制，它可以帮助我们在开发调试过程中减少但增加自信心（钓鱼时间）。基本原始类型校验基本类型比较简单，这里不做过多介绍，只看下面的例子：exportdefault{props:{//基本类型校验//("null"和"undefined"值允许anytype)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,//不同于对象或数组的默认值。//Thisisnotafactoryfunction//-thisisafunctiondefault(){return'Defaultfunction'}}}}类型可以是以下之一：instanceof检查。例如，给定以下类：classPerson{constructor(firstName,lastName){this.firstName=firstNamethis.lastName=lastName}}我们可以将Person作为类型传递给proptype：exportdefault{props:{author:Person}}高级验证验证器方法Props支持使用验证器函数。此函数接受prop原始值，并且必须返回一个布尔值以确定prop是否有效。prop:{validator(value){//该值必须与这些字符串之一匹配return['success','warning','danger'].includes(value)}}使用枚举有时我们希望将值缩小到一个特定的集合，这可以通过枚举来实现：exportconstPosition=Object.freeze({TOP:"top",RIGHT:"right",BOTTOM:"bottom",LEFT:"left"});可以导入Validator也可以作为默认值：<脚本>从“./types”导入{位置}；导出默认值{道具：{位置：{验证器（值）{返回Object.values（位置）.includes（值）；},默认:Position.BOTTOM,},},};最后，父组件也可以导入和使用这个枚举，这消除了我们应用程序中魔术字符串的使用：布尔映射布尔类具有独特的行为属性的存在与否决定了prop的值。TypeScript对比Vue内置的propvalidation和TypeScriptCombining这让我们可以更好地控制这种机制，因为TypeScript本身就支持接口和枚举。接口我们可以使用接口和PropType来注释复杂的道具类型。这确保传递的对象将具有特定的结构。enum我们已经探索了如何在JS中伪造枚举。这对于支持它的TypeScript来说是不需要的：LEFT='left',}exportdefault{props:{position:{type:StringasPropType,default:Position.BOTTOM,},},};以上Vue3使用Vue3时一切正常使用选项API或组合API。不同之处在于使用或者使用TypeScript的或使用接口：最后，在When使用基于类型的声明，声明默认值。总结随着应用程序的扩展，类型检查是防止错误的第一道防线。与TypeScript相结合，它使您在正确使用组件接口、减少错误并提高整体代码质量和开发体验方面充满信心。