VueTypes vue props 類型定義工具， 使用鏈式調用的方式定義vue props
簡單例子
<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 的編寫方式要簡潔不少。
安裝
<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 任意類型
<pre>{
content: any(),
// 可接收具體的指定類型
content: any<unknown>(),
content: any<string>(),
}</pre>
覺得可以將 any() 看作其他類型定義的父類或原方法
- bool 布爾
<pre>{
disabled: bool()
}</pre>
- string 字符
<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 數字
<pre>{
// 基礎類型
pageNum: number(), // number
// 范圍限制
pageSize number<10, 20, 50, 100>()，// 10 | 20 | 50 | 100
// 整數
jumpNum: integer()
}</pre>
- array 數組
<pre>{
// 任意數組
list: array(), // unknown[]
// 指定類型
menu: array<string>(), // string[]
// array 為泛型函數, 接收具體的數組元素類型
}</pre>
- Object 對象
<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 函數
<pre>{
// 任意函數
action: func() // (...args: any[]) => any
// 指定類型
formatter: func<(s: string) => string>()
onClick: func<(e: Event) => void>()
}</pre>
- symbol
<pre>{
valueKey: symbol()
}</pre>
公共方法
所有類型定義函數都具有公共的工具方法
- def 設置默認值
<pre>{
name: string().def(''),
age: number().def(0),
hobby: array<string>().def(() => ['sleep']),
father: Object<Man>().def(() => ({...}))
}</pre>
- isRequired 必填
<pre>{
content: string().isRequired
}</pre>
校驗函數
- instanceOf 校驗值是否屬于某一類型
<pre> class User{...}
{
user: instanceOf(User),
title: instanceOf(String)
}</pre>
- oneOf 值必須為指定范圍內的任一值
<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 值必須為指定范圍內的任意定義
<pre>{
data: oneOfType([string(), Number, Object<User>() ]),
// oneOfType 將校驗傳入的值，是否在指定類型內, 且可以與類型定義函數組合使用
}
// 需要注意的是，oneOfType 內部接收的是類型, 類型定義的公共函數是無效的
{
key: oneOfType([ string().def('defKey'), number() ]).isRequired
// 這里 string().def('defKey') 是無效的，并不能屏蔽 isRequired
}</pre>
- arrayOf 指定數組類型校驗
<pre>{
// 單一類型
keys: arrayOf(String),
// 聯合類型
keys: arrayOf(oneOfType([ string(), number()])) // string[] | number[]
}</pre>
- objectOf 對象屬性值校驗
<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 定義對象的具體結構
<pre> interface User{
name: string
age: number
}
{
user: shape<User>({
name: string(),
age: number()
})
}</pre>
- custom 自定義校驗函數
<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
<pre>import VueTypes, {string} from 'vue-types
{
message: VueTypes.string.isRequired,
// 等價
message: string().def('').isRequired
}</pre>
具體包含的函數以及規則，可查看官方文檔
自定義規則 / 擴展
<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>
自定命名空間
<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 的屬性，方法已經夠多的了。
