Typing Object props

[rijkvanzanten]

As per vuejs/vue#9692 (comment), I expected to be able to type Object props using TypeScript as follows:

<script lang="ts">
import { PropType } from 'vue';
import { createComponent } from '@vue/composition-api';

interface Options {
	labelOn: string;
	labelOff: string;
}

export default createComponent({
	props: {
		options: {
			type: Object as PropType<Options>,
			default: false
		}
	},
	setup(props) {
		props.options;
	}
});
</script>

However, as soon as I add as PropType<Options> to the mix, I get an error in Vetur and Vue CLI serve:

No overload matches this call.
  Overload 1 of 2, '(options: ComponentOptionsWithoutProps<never, unknown>): VueProxy<never, unknown>', gave the following error.
    Type '{ value: { type: BooleanConstructor; default: null; }; readonly: { type: BooleanConstructor; default: boolean; }; options: { type: PropType<Options>; default: boolean; }; }' is not assignable to type 'undefined'.

I saw that #208 mentioned adding support for the above for function calls, but I'm wondering if the "original" functionality exists in the Composition API to begin with.

Is what I'm trying to do supported, or am I using it wrong? If that's the case, how can one type Object type props properly in TypeScript? Thanks for all your great work 🙂

[rijkvanzanten]

The function workaround mentioned in vuejs/vue#6856 (comment) luckily does work in this instance, eg:

<script lang="ts">
import { PropType } from 'vue';
import { createComponent } from '@vue/composition-api';

type Options = {
	labelOff: string;
	labelOn: string;
};

export default createComponent({
	props: {
		options: {
			type: Object as () => Options,
			required: true
		}
	},
	setup(props) {
		props.options;
	}
});
</script>

[LinusBorg]

This package exports its own PropType type which you should use when using this plugin