vue-ts-types

成文日期：2024-05-11

一、基础信息介绍

当前学习版本：1.6.2 • Public • Published 15 days ago

替代vue原生props传值写法的一个库。

无依赖且兼容Vue.js v2.6, v2.7 and v3.2.

提供更灵活和详细的prop类型验证。

1、避免声明设置冗长2、快捷undefined和null类型联合定义。3、验证错误处理。4、避免设置default后required失效

不用TS时，使用vue-types可以更好的支持类型校验。vue3+TS则主要用于简洁和灵活便利。

类似的包：

Vue-types、vue-prop、vuept

安装

npm install vue-ts-types

例子

import { defineComponent } from 'vue';
import {
  arrayProp,
  booleanProp,
  functionProp,
  isPositive,
  numberProp,
  oneOfProp,
  stringProp,
} from 'vue-ts-types';

defineComponent({
  props: {
    disabled: booleanProp().withDefault(false),
    // resulting prop type: boolean  

    title: stringProp().optional,
    // resulting prop type: string | undefined

    description: stringProp().nullable,
    // resulting prop type: string | null

    items: arrayProp<string>().required,
    // resulting prop type: string[]

    callback: functionProp<() => void>().optional,
    // resulting prop type: (() => void) | undefined

    color: oneOfProp(['red', 'green', 'blue'] as const).withDefault('red'),
    // resulting prop type: 'red' | 'green' | 'blue'

    timeout: numberProp(isPositive).required,
    // resulting prop type: number
  },
});

二、用法

1、组件的方法（** Prop）都返回包含以下属性的对象：

属性	说明
optional	非必要，可undefined（默认）。
nullable	非必要，可null（默认）。
required	使用它将道具标记为required，没有默认值。
withDefault	用来为道具设置一个默认值。

返回prop types。

Note:

Vue中的props默认值只在传递的值为undefined时生效，如果传递的值为null，则不会使用默认值。这是因为在JavaScript中，undefined和null是两种不同的值，虽然它们有时会相互转换，但它们的用途和处理方式是不同的。

2、自定义验证器函数（Custom validator functions）

验证器函数，接收任意类型，使用类型的值，返回验证错误信息或undefined（通过验证情况）。

验证器函数不影响类型推断。

import { numberProp } from 'vue-ts-types';
type Validator = (value: unknown) => string | undefined;
const isPositive: Validator = (value) => {
  if (typeof value !== 'number' || value <= 0 || Number.isNaN(value)) {
    return 'value should be a positive number';
  }
  return undefined;
};
numberProp(isPositive).optional;
// → prop type: number | undefined

内置验证器函数

isNegative: 只允许负数(< 0)
isPositive: 只允许正数(> 0)
isNonNegative: 只允许非负数(>= 0)
isNonPositive: 只允许非正数(<= 0)

3、Prop类型方法

标题	注释
`stringProp<T>(validator?: Validator)`	字符串类型
`booleanProp(validator?: Validator)`	布尔类型
`numberProp<T>(validator?: Validator)`	数字类型
`integerProp(validator?: Validator)`	整数类型
`symbolProp(validator?: Validator)`	symbol类型
`vueComponentProp(validator?: Validator)`	组件实例
`anyProp<T>(validator?: Validator)`	any类型
`arrayProp<T>(validator?: Validator)`	数组类型
`objectProp<T>(validator?: Validator)`	对象类型
`functionProp<T>(validator?: Validator)`	函数类型
`oneOfProp<T>(allowedValues: readonly any[], validator?: Validator)`	指定的允许值
`oneOfObjectKeysProp<T>(object: object, validator?: Validator)`	指定对象的任何键
`oneOfTypesProp<T>(type: PropType<T>, validator?: Validator)`	构造函数类型
`instanceOfProp<T>(parent: T, validator?: Validator)`	构造函数实例

stringProp、numberProp泛型T在使用联合类型是，推荐是用oneOfProp

使用案例，推荐查阅官方使用demo

标题

vue-ts-types 使用笔记