vue-types

VueTypes 是 Vue.js 的可配置prop 验证器的集合，受到 React 的启发prop-types

npm install vue-types 或 yarn add vue-types

// 引入 vue-types

import VueTypes from 'vue-types';
export default {
  name: 'ExampleComponent',
  props: {
    title: VueTypes.string.isRequired,
    age: VueTypes.number.def(20), // 默认值为 20
    isActive: VueTypes.bool.def(true),
    customProp: VueTypes.oneOf(['option1', 'option2', 'option3']).isRequired,
  }
};

// 在 TypeScript 环境中

import VueTypes from 'vue-types';
export default {
  name: 'ExampleComponent',
  var a=unknown | String
  props: {
    title: VueTypes.string.isRequired as unknown as String,
    age: VueTypes.number.def(20) as unknown as Number,
    isActive: VueTypes.bool.def(true) as unknown as Boolean,

  }

};

1、何时使用

虽然 Vue.js 中的基本 prop 验证既简单又方便，但细粒度验证在复杂组件上可能会变得冗长。VueTypes 提供了一个紧凑而流畅的界面来定义项目的 props。 

2、使用示例

想象一个带有一组 props 的典型 Vue.js 组件：

export default {
  props: {
    id: {
      type: Number,
      default: 10,
    },
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      validator(value) {
        return Number.isInteger(value)
      },
      default: 0,
    },
    nationality: String,

  },
  methods: {
    // ...

  },

}

虽然这个组件工作得很好，但编写大量的 prop 验证对象可能会变得重复。使用 VueTypes 你可以重写相同的 props，如下所示：

import VueTypes from 'vue-types'
export default {
  props: {
    id: VueTypes.number.def(10),
    name: VueTypes.string.isRequired,
    age: VueTypes.integer,
    nationality: VueTypes.string,
  },
  methods: {
    // ...
  },
}

3、单个验证器导入

从版本 2.0.0 开始，您可以导入单独的验证器以获得更简洁的语法：

import { number, string, integer } from 'vue-types'
export default {
  props: {
    id: number().def(10),
    name: string().isRequired,
    age: integer().def(0),
    nationality: string(),
  },
  methods: {
    // ...
  },
}