像专业人员一样验证你的Vue Props

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

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

一、业人员样验证基础知识

1.1 原始类型

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

export default {

props: {

// Basic type check

// (`null` and 业人员样验证`undefined` values will allow any type)

propA: Number,

// Multiple possible types

propB: [String, Number],

// Required string

propC: {

type: String,

required: true

},

// Number with a default value

propD: {

type: Number,

default: 100

},

}

}1.2 复杂类型

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

export default {

props: {

// 具有默认值的像专对象

propE: {

type: Object,

// 对象或数组默认值必须从一个工厂函数。该函数接收原始组件作为参数接收的业人员样验证props。

default(rawProps) {

return { message: hello }

}

},像专

// 具有默认值的数组

propF: {

type: Array,

default() {

return []

}

},

// 具有默认值的函数

propG: {

type: Function,

// 与对象或数组默认不同，这不是业人员样验证工厂函数 - 这是一个用作默认值的函数

default() {

return Default function

}

}

}

}

类型可以是以下值之一：

NumberStringBooleanArrayObjectDateFunctionSymbol

另外，type​ 也可以是像专自定义类或者构造函数，断言会通过 instanceof 检查。例如，给定以下类：

class Person {

constructor(firstName, lastName) {

this.firstName = firstName

this.lastName = lastName

}

}

你可以像这样把它作为一个 props 类型。服务器托管

export default {

props: {

author: Person

}

}

二、高级验证

2.1 验证器函数

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

// 自定义验证器函数

prop: {

validator(value) {

// 该值必须与这些字符串之一匹配

return [success, warning, danger].includes(value)

}

},2.2 使用枚举

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

export const Position = Object.freeze({

TOP: "top",

RIGHT: "right",

BOTTOM: "bottom",

LEFT: "left"

});

可以在验证器中导入和使用，也可以作为默认值。

{ { position }}

import { Position } from "./types";

export default {

props: {

position: {

validator(value) {

return Object.values(Position).includes(value);

},

default: Position.BOTTOM,

},

},

};

</script>

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

import DropDownComponent from "./components/DropDownComponent.vue";

import { Position } from "./components/types";

export default {

components: {

DropDownComponent,

},

data() {

return {

Position,

};

},

};

</script>2.3 布尔型投射

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

<MyComponent />

三、TypeScript

将 Vue 的内置 prop 验证与 TypeScript 相结合可以让我们更好地控制这种机制，因为 TypeScript 原生支持接口和枚举。

3.1 Interfaces

我们可以使用一个接口和PropType工具来注解复杂的 prop 类型，这确保了传递的对象将有一个特定的结构。

import Vue, { PropType } from vue

interface Book {

title: string

author: string

year: number

}

const Component = Vue.extend({

props: {

book: {

type: Object as PropType,

required: true,

validator (book: Book) {

return !!book.title;

}

}

}

})

</script>

3.2 真实枚举

我们已经探索了如何在 Javascript 中伪造枚举。这对于 TypeScript 来说是不需要的，源码下载因为枚举是原生支持的。

import Vue, { PropType } from vue

enum Position {

TOP = top,

RIGHT = right,

BOTTOM = bottom,

LEFT = left,

}

export default {

props: {

position: {

type: String as PropType,

default: Position.BOTTOM,

},

},

};

</script>

四、Vue 3

当使用带有 Options 或 Composition API 的 Vue 3 时，以上所有内容都有效。不同之处在于使用 <script setup>​ 时。必须使用 defineProps() 宏声明道具，如下所示：

const props = defineProps([foo])

console.log(props.foo)

// 还支持长语法

defineProps({

title: String,

likes: Number

})

</script>

或者当使用带有 <script setup> 的 TypeScript 时，可以使用纯类型注释来声明 props：

defineProps<{

title?: string

likes?: number

}>()

</script>

或使用接口：

interface Props {

foo: string

bar?: number

}

const props = defineProps()

</script>

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

interface Props {

foo: string

bar?: number

}

// defineProps() 的反应性解构

// 默认值被编译为等效的运行时选项ime option

const { foo, bar = 100 } = defineProps()

</script>

结束

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

原文：https://fadamakis.medium.com/validating-your-vue-props-like-a-pro-5a2d0ed2b2d6作者：Fotis Adamakis​