vue中propType分析

本文的主要目的是要枚举出 vue 中常用的 propType 类型配置对象

无默认值

没有默认值的时候，可以直接使用类型作为 prop 定义的值，如：

export default {
  props: {
    placeholder: String,
  },
};

此种情况可以直接使用构造函数作为值来定义 prop 类型，但需要注意默认值为undefined

常用类型且有默认值

这种情形也比较多，可以统一定义，然后在项目内引用这些定义的值作为 prop 定义的值

// prop定义创建函数
export function createPropDefinition(type, defaultValue) {
  return {
    type: type,
    default: defaultValue,
  };
}

// 对象类型，默认值为空对象
export const objectType = createPropDefinition(Object, () => ({}));

// 数组类型，默认值为空数组
export const arrayType = createPropDefinition(Array, () => []);

// 函数类型
export const functionType = createDefinition(Function, () => () => {});

// 数字类型
export const numberType = createDefinition(Number, 0);

// 字符串类型
export const stringType = createDefinition(String, "");

// 布尔类型
export const boolean = createDefinition(Boolean, false);

数组类型

定义指定项类型的数组

/**
 * 创建定义数组项的数组类型定义
 */
export function createArrayType(itemValidator) {
  return {
    validator(items) {
      return Array.isArray(items) && items.every(itemValidator);
    },
    default: () => [],
  };
}

/**
 * 创建用typeof检验类型的函数
 * @param {string} typeString typeof的值
 * @returns 函数，用于判断一个值是否是typeof的某个类型
 */
export function createIsTypeOf(typeString) {
  return (item) => typeof item === typeString;
}

/**
 * 创建字符串数组的定义
 */
export const stringArrayType = createArrayType(createIsTypeOf("string"));

/**
 * 创建数字数组类型的定义
 */
export const numberArrayType = createArrayType(createIsTypeOf("number"));

/**
 * 创建布尔值数组类型的定义
 */
export const booleanArrayType = createArrayType(createIsTypeOf("boolean"));

枚举值类型

prop 只接收特定的几个值中的一个作为值

/**
 * 创建枚举值类型校验器
 * @param {Array} values 枚举值数组
 * @param {any} defaultValue 默认值，未传则取values[0]
 */
export function createEnumPropDefinition(values, defaultValue) {
  return {
    validator(value) {
      return values.includes(value);
    },
    default: defaultValue ?? values[0],
  };
}

// 示例
export const workDayType = createEnumPropDefinition([1, 2, 3, 4, 5]);

自定义类

在vue2.x中，将使用class定义的类作为type的值时，开发环境下不会提示类型错误（使用function定义的无此问题）

/**
 * 创建class定义的类的校验
 * @param {Class} 自定义类
 */
export function createClassPropDefinition(customClass, defaultValue) {
  return {
    validator(value) {
      return value == null || value instanceof customClass;
    },
    default: defaultValue,
  }
}