VueTypes - vue props定义工具入门VueTypes vue props 类型定义工具，使用链式调用的

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

简单例子

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: []
    }
  }
}

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

安装

npm install vue-types --save
or
yarn add vue-types
or
pnpm i -S vue-types

基础使用

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

类型定义函子

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

any 任意类型

{
   content: any(),
   // 可接收具体的指定类型
   content: any<unknown>(),
   content: any<string>(),
}

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

bool 布尔

{
  disabled: bool()
}

string 字符

 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)
}
// 所以枚举具有更强的约束性，联合类型具有更好的适应性。

number / integer 数字

{
  // 基础类型
  pageNum: number(), // number
  // 范围限制
  pageSize number<10, 20, 50, 100>()，// 10 | 20 | 50 | 100
  // 整数
  jumpNum: integer()
}

array 数组

{
  // 任意数组
  list: array(), // unknown[]
  // 指定类型
  menu: array<string>(), // string[]
  // array 为泛型函数, 接收具体的数组元素类型
}

Object 对象

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'))
}

func 函数

{
  // 任意函数
  action: func() // (...args: any[]) => any
  // 指定类型
  formatter: func<(s: string) => string>()
  onClick: func<(e: Event) => void>()
}

symbol

{
  valueKey: symbol()
}

公共方法

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

def 设置默认值

{
  name: string().def(''),
  age: number().def(0),
  hobby: array<string>().def(() => ['sleep']),
  father: Object<Man>().def(() => ({...}))
}

isRequired 必填

{
   content: string().isRequired
}

校验函数

instanceOf 校验值是否属于某一类型

 class User{...}
{
   user: instanceOf(User),
   title: instanceOf(String)
}

oneOf 值必须为指定范围内的任一值

{
  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范围，并不参与实际的运行时
}

oneOfType 值必须为指定范围内的任意定义

{
  data: oneOfType([string(), Number, Object<User>() ]),
  // oneOfType 将校验传入的值，是否在指定类型内, 且可以与类型定义函数组合使用
}
// 需要注意的是，oneOfType 内部接收的是类型, 类型定义的公共函数是无效的
{
  key: oneOfType([ string().def('defKey'), number() ]).isRequired
  // 这里 string().def('defKey') 是无效的，并不能屏蔽 isRequired
}

arrayOf 指定数组类型校验

{
  // 单一类型
  keys: arrayOf(String),
  // 联合类型
  keys: arrayOf(oneOfType([ string(), number()])) // string[] | number[]
}

objectOf 对象属性值校验

{
  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
}

shape 定义对象的具体结构

 interface User{
  name: string
  age: number
}


{
  user: shape<User>({
    name: string(),
    age: number()
  })
}

custom 自定义校验函数

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
  }
}

命名空间

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

内置命名空间， VueTypes

import VueTypes, {string} from 'vue-types
{
   message: VueTypes.string.isRequired,
  // 等价
  message: string().def('').isRequired
}

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

自定义规则 / 扩展

// 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')
    }
}

自定命名空间

// 官方例子
// 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'
  },
}

总结

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

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

VueTypes - vue props定义工具入门