Extracting the prop types of a component in Vue 3 (typescript) to use them somewhere else

user_13638635 0
Viewed 2618

Vue can already infer the types of props when you annotate the props under the "props:" key of the component and that is good.

But is there an "utility type" in the vue types which can extract the type of the props from a given component?

Say I have a component defined with defineComponent and the component declaration has a props key which properly defines the names and types of the props. I want an utility type that works like this:

let someting: PropType<MyComponent> = {...};

Vue typescript types contain lots of utility types like this but I couldn't find something that does this.

vuejs3 vue.js typescript
3 Answers

Figured it out; something like the following works:

import MyComponent from "./mycomponent.vue";

type MyComponentProps = InstanceType<typeof MyComponent>["$props"];

const props: MyComponentProps = { ... }
user_136386350

It's not really want I wanted, but you get some support while using Partial<InstanceType<typeof MyComponent>>.

Edit: Previous answers were accessing the type of ['$props'], but this did not work for me, because there was no type check on the actual props. With partial, I could at least archive some kind of typechecking for a part of the Component, so in my case I could add the prop object and got type checking for it. Problem with this is, that I have to know which of the properties are required, and which not. I hope there is a better answer to this question, but for know I am fine with my solution.

user_57344070

What worked for me is this:

import {AllowedComponentProps, Component, VNodeProps} from 'vue';

type ComponentProps<C extends Component> = C extends new (...args: any) => any
  ? Omit<InstanceType<C>['$props'], keyof VNodeProps | keyof AllowedComponentProps>
  : never;

Full working example

import {AllowedComponentProps, Component, PropType, VNodeProps} from 'vue';

type ComponentProps<C extends Component> = C extends new (...args: any) => any
  ? Omit<InstanceType<C>['$props'], keyof VNodeProps | keyof AllowedComponentProps>
  : never;

type Config<C extends Component> = {
  component: C;
  props: ComponentProps<C>;
};

declare function defineConfig<C extends Component>(config: Config<C>): void;

const TestComponent = defineComponent({
  name: 'TestComponent',
  props: {
    disabled: {
      type: Boolean,
    },
    options: {
      type: Array as PropType<{key: string; value: string}[]>,
      required: true,
    },
  },
});

defineConfig({
  component: TestComponent,
  props: { // TS will throw an error because options is required but missing
    // IDE will suggest:
    //   disabled: boolean | undefined
    //   options: {key: string; value: string}[]
  },
});

Why does it need Omit?

Just InstanceType<C>['$props'] includes properties of VNodeProps and AllowedComponentProps. So, omitting their properties leaves only the actual props of the component.

Why does it need extends?

Without checking if C extends new (...args: any) => any, InstanceType will trigger TS error TS2344:

TS2344: Type 'C' does not satisfy the constraint 'abstract new (...args: any) => any'.
user_102259660
Related