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

<pre>npm install vue-types --save
 or
 yarn add vue-types
 or
 pnpm i -S vue-types</pre>

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

<pre>{
 disabled: bool()
 }</pre>

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

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

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

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

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

<pre>{
 valueKey: symbol()
 }</pre>

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

<pre>{
 content: string().isRequired
 }</pre>

<pre> class User{...}
 {
 user: instanceOf(User),
 title: instanceOf(String)
 }</pre>

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

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

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

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

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

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

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