前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VueTypes - vue props定义工具入门

VueTypes - vue props定义工具入门

作者头像
copy_left
发布2021-12-16 09:34:30
1.5K0
发布2021-12-16 09:34:30
举报
文章被收录于专栏:方球

VueTypes vue props 类型定义工具, 使用链式调用的方式定义vue props

简单例子

代码语言:javascript
复制
<pre>import { string, number, array } from 'vue-types'
 {
 props: {
 title: string().def(''),
 count: number().def(0),
 menu: array<string>().def([])
 }
 }
 // 等价
 {
 props: {
 title: {
 type: String,
 default: ''
 },
 count: {
 type: Number,
 default: 0
 },
 menu: {
 type: Array as PropType<string[]>,
 default: []
 }
 }
 }</pre>

比较之下, vueTypes 的编写方式要简洁不少。

安装

代码语言:javascript
复制
<pre>npm install vue-types --save
 or
 yarn add vue-types
 or
 pnpm i -S vue-types</pre>

基础使用

个人觉得TS环境下才是该工具的目标场景,所以下面默认在TS环境下。JS环境内的使用其他大致相同。

类型定义函子

官方文档说明,每一种类型定义工具都是一个返回vue props validation 的函子, 所以都是以函数调用的方式返回所需的类型定义

  • any 任意类型
代码语言:javascript
复制
<pre>{
 content: any(),
 // 可接收具体的指定类型
 content: any<unknown>(),
 content: any<string>(),
 }</pre>

觉得可以将 any() 看作其他类型定义的父类或原方法

  • bool 布尔
代码语言:javascript
复制
<pre>{
 disabled: bool()
 }</pre>
  • string 字符
代码语言:javascript
复制
<pre> enum Type {
 success = 'success',
 fail = 'fail'
 }
 {
 // 基础string类型
 title: string(),
 // 范围限制
 type: string<'success' | 'fail>,  // 联合类型
 type: string<Type>(), // 枚举
 }
 // 枚举和联合类型,主要的区别在使用和指定默认值时
// 联合类型使用模式匹配
 {
 // 指定默认值
 type: string<'success' | 'fail'>().def('success')
 }
 // 枚举必须使用指定的枚举值
 {
 type: string<Type>().def(Type.success)
 }
 // 所以枚举具有更强的约束性,联合类型具有更好的适应性。</pre>
  • number / integer 数字
代码语言:javascript
复制
<pre>{
 // 基础类型
 pageNum: number(), // number
 // 范围限制
 pageSize number<10, 20, 50, 100>(),// 10 | 20 | 50 | 100
 // 整数
 jumpNum: integer()
 }</pre>
  • array 数组
代码语言:javascript
复制
<pre>{
 // 任意数组
 list: array(), // unknown[]
 // 指定类型
 menu: array<string>(), // string[]
 // array 为泛型函数, 接收具体的数组元素类型
 }</pre>
  • Object 对象
代码语言:javascript
复制
<pre>interface UserO {
 id: string
 name: string
 }
 class UserC{
 constructor( public name: string, public id: string ){
 }
 }
 {
 // 任意对象
 data: object // { [k: string]: any }
 // 指定类型
 usero: object<UserO>
 userc: object<UserC>
 }
 // 这里 userO userC 也符合模式匹配规则
 {
 user: object<UserO>.def(new UserC('name', 'id'))
 }</pre>
  • func 函数
代码语言:javascript
复制
<pre>{
 // 任意函数
 action: func() // (...args: any[]) => any
 // 指定类型
 formatter: func<(s: string) => string>()
 onClick: func<(e: Event) => void>()
 }</pre>
  • symbol
代码语言:javascript
复制
<pre>{
 valueKey: symbol()
 }</pre>

公共方法

所有类型定义函数都具有公共的工具方法

  • def 设置默认值
代码语言:javascript
复制
<pre>{
 name: string().def(''),
 age: number().def(0),
 hobby: array<string>().def(() => ['sleep']),
 father: Object<Man>().def(() => ({...}))
 }</pre>
  • isRequired 必填
代码语言:javascript
复制
<pre>{
 content: string().isRequired
 }</pre>

校验函数

  • instanceOf 校验值是否属于某一类型
代码语言:javascript
复制
<pre> class User{...}
 {
 user: instanceOf(User),
 title: instanceOf(String)
 }</pre>
  • oneOf 值必须为指定范围内的任一值
代码语言:javascript
复制
<pre>{
 type: oneOf<'success' | 'fail'>(['success', 'fail']),
 // 等价定义
 type: onOf<['success', 'fail']>([''success', 'fail']),
 // 如果不指定具体的联合类型或元组, 自动推导的类型可能存在差异, 这由TS本身所决定的
 type: oneOf(['success', 'fail']) // string[]
 }
 // 需要注意的是,存在类似 oneOf 的定义,但行为不同
 {
 type: string<'success' | 'fail'>().isRequired
 // 虽然我们限定了 type 的类型值, 但是实际运行时,只会校验值是否存在,不会校验具体值是否在指定的
 // 类型范围内, 毕竟类型定义属于TS范围,并不参与实际的运行时
 } </pre>
  • oneOfType 值必须为指定范围内的任意定义
代码语言:javascript
复制
<pre>{
 data: oneOfType([string(), Number, Object<User>() ]),
 // oneOfType 将校验传入的值,是否在指定类型内, 且可以与类型定义函数组合使用
 }
 // 需要注意的是,oneOfType 内部接收的是类型, 类型定义的公共函数是无效的
 {
 key: oneOfType([ string().def('defKey'), number() ]).isRequired
 // 这里 string().def('defKey') 是无效的,并不能屏蔽 isRequired
 }</pre>
  • arrayOf 指定数组类型校验
代码语言:javascript
复制
<pre>{
 // 单一类型
 keys: arrayOf(String),
 // 联合类型
 keys: arrayOf(oneOfType([ string(), number()])) // string[] | number[]
 }</pre>
  • objectOf 对象属性值校验
代码语言:javascript
复制
<pre>{
 maps: ObjectOf(string()).def({source: 'xx'}),
 maps: ObjectOf(string()).def({source: 00}), //将报错, 对象内的所有属性值必须满足类型定义
 }
 // 可以与oneOfType 一起使用
 {
 keys: objectOf(oneOfType([string(), number()])).def({a: 'k', b: 10})
 }
 // 虽然也可以与 oneOf 一起使用但结果并不如定义的预期
 {
 keys: ObjectOf(oneOf(['a', 'b'])).def({ key: 'xxx' })
 // 值并不能被限制为 'a' 'b', 这里属性值类型将被解析为 string
 }</pre>
  • shape 定义对象的具体结构
代码语言:javascript
复制
<pre> interface User{
 name: string
 age: number
 }
{
 user: shape<User>({
 name: string(),
 age: number()
 })
 }</pre>
  • custom 自定义校验函数
代码语言:javascript
复制
<pre>interface Anime{
 type: string
 [k: string]: unknown
 }
function isMonkey(a: Anime){
 return a.type === 'monkey'
 }
export const props ={
 monkey: custom(isMonkey),
 // 等价
 monkey: {
 type: Object as PropType<Anime>,
 validator: isMonkey
 }
 }</pre>

命名空间

vueTypes 提供命名空间,可以将常用的定义或规则挂载在指定的命名空间下,方便调用。

内置命名空间 , VueTypes

代码语言:javascript
复制
<pre>import VueTypes, {string} from 'vue-types
 {
 message: VueTypes.string.isRequired,
 // 等价
 message: string().def('').isRequired
 }</pre>

具体包含的函数以及规则,可查看官方文档

自定义规则 / 扩展

代码语言:javascript
复制
<pre>// custom-type.ts
 import VueTypes, {
 VueTypesInterface,
 VueTypeDef,
 } from 'vue-types'
class Anime{
 constructor(public type: string){}
 }
interface AnimeType extends VueTypesInterface{
 anime(type: string): VueTypeDef<Anime>
 }
export const newTypes = VueTypes.extend<AnimeType>([
 {
 name: 'animeType',
 type: Object,
 validator: (type:string, v: Anime) => v.type === type
 }
 ])
// component.vue
 {
 props: {
 monkey: newTypes.animeType('monkey')
 }
 }</pre>

自定命名空间

代码语言:javascript
复制
<pre>// 官方例子
 // core/types.js
 import VueTypes from 'vue-types'
VueTypes.sensibleDefaults = {
 ...VueTypes.sensibleDefaults,
 string: 'hello',
 }
// core/component.vue
 import VueTypes from './types'
export default {
 props: {
 greeting: VueTypes.string, // default is 'hello'
 },
 }</pre>

总结

vue-types 提供了一种 props 定义和复用的方式,提高编写效率。但毕竟属于一类方言工具, 还是有学习和维护成本的。

毕竟vue 的属性,方法已经够多的了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/12/12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简单例子
  • 安装
  • 基础使用
    • 类型定义函子
      • 公共方法
        • 校验函数
        • 命名空间
          • 内置命名空间 , VueTypes
            • 自定义规则 / 扩展
              • 自定命名空间
              • 总结
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档