Vue TS Utils

Typescript utils for vue2 and Vue3

Installation

npm install vue-ts-utils -D

Features

Inferring Attrs

1. Option Component

const Comp = defineComponent({
    slots: Object as SlotsType<{
        foo?: { data: string }
    }>,
    attrs: Object as AttrsType<{
        bar?: string
    }>,
    setup(props, { slots, attrs }) {
        console.log(attrs.bar)
        slots.foo?.({ data: 'a' })
    }
});
<Comp bar={"str"} />;

2. Functional Component

const Comp = defineComponent(
  (props: { foo: string }, ctx) => {
    console.log(ctx.attrs.bar)
    return () => (
      <div>{props.foo}</div>
    )
  },
  {
    slots: Object as SlotsType<{
        baz?:  { data: string }
    }>,
    attrs: Object as AttrsType<{
      bar?: number
    }>
  }
);
<Comp bar={1} foo={"str"} />;

License

MIT