ts-prop v3.0.2

ts-prop

Prop type definition of Vue3. only recommended for vue typescript.

install

npm install ts-prop

yarn add ts-prop

example

<template>
  <div></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import prop from 'ts-prop';

export const drawerProps = {
  visible: prop.boolean.def(false).isRequired,
  title: prop.string
};

export const drawerEmits = {
  open: prop.emit<(value: boolean) => void>(),
};

export default defineComponent({
  name: 'Drawer',
  props: drawerProps,
  emits: drawerEmits,
  setup(props, { emit }) {
    return {}
  },
});
</script>

import prop from 'ts-prop';

interface Person {
  name: string;
  sex?: string;
  age: number;
}

const props = {
  name: prop.stringNumber.def('123').isRequired,
  //{type:[String,Number],required:true,default:123}
  test: prop.string,
  //{type:String}
  titles: prop.array<Person>().valid((value) => value.length > 0),
  //{type:Array as PropType<Array<Person>>,validator:(value) => value.length > 0}
  content: prop.vNode,
  //{type:[Object,String] as PropType<VNode|null|string>}
  style: prop.css.def({ height: '20px' }),
  //{type: Object as PropType<StyleValue>,default:{ height:'20px' }}
};

api

Template Literal Types Api

import { defineComponent, toRefs } from 'vue';
import prop from 'ts-prop';

type Button = 'ok' | 'cancel' | 0 | true;
export default defineComponent({
  name: 'LiteralType',
  props: {
    name: prop.literalType<Button>().def('ok'),
  },
  setup(props) {
    const { name } = toRefs(props);
    return () => <button>{name.value}</button>;
  },
});

Custom Type

prop.ts

import { useProp } from 'ts-prop';

export default class DefineProp {
  static stringObject<T = Record<string, unknown>>() {
    return useProp<string | T>([String, Object]);
  }

  static get stringBoolean() {
    return useProp<string | boolean>([String, Boolean]);
  }
}

import prop from './prop';

const props = {
  name: prop.stringObject<{ name?: string; lowerCase?: boolean }>(),
  type: prop.stringBoolean.isRequired,
};