I'm trying to type the implementation of the standard Button component from Storybook, it was supposed to be typed, but my TS is giving an error in the interpolation within the setup, as in the image below...
I don't know if it's a syntax error or a tsconfig error, here's the snippet of the code in question:
export default defineComponent({
name: 'my-button',
components: {
VBtn
},
props: {
label: {
type: Boolean,
required: true,
},
variation: String,
size: {
type: String,
validator: function (value: string) {
return ['small', 'medium', 'large'].indexOf(value) !== -1;
},
},
backgroundColor: {
type: String,
},
},
emits: ['click'],
setup(props, { emit }): typeSetup {
props = reactive(props);
return {
classes: computed(() => ({
'storybook-button': true,
[`storybook-button--${props.variation}`]: true,
[`storybook-button--${props.size || 'medium'}`]: true,
})),
style: computed(() => ({
backgroundColor: props.backgroundColor,
})),
onClick() {
emit('click');
},
}
},
});
Error:
Property 'variation' does not exist on type
'Readonly<LooseRequired<Readonly<ExtractPropTypes<Readonly<ComponentPropsOptions<Data>>>>>