Declaring props type with Typescript was broken after updated from v0.3.1 to v0.3.2
interface Props {
prop1: string[];
prop2: number[];
}
export default createComponent({
props: (['prop1', 'props2'] as unknown) as Props,
})
The compiler complains
No overload matches this call.
Overload 1 of 2, '(options: ComponentOptionsWithoutProps<never, unknown>): VueProxy<never, unknown>', gave the following error.
Type 'Props' is not assignable to type 'undefined'.
I investigated and found that this change cause the break.
https://github.com/vuejs/composition-api/commit/0565acb4ff56042c811c661893a4c61d100ef33e#diff-f2fa4059dd5efeb563915aed92f20664R81
From PropsOptions = ComponentPropsOptions to PropsOptions extends ComponentPropsOptions = ComponentPropsOptions
How to exactly declare props type using typescript ?
This works:
interface IProps {
prop1: string[];
prop2: number[];
}
export default createComponent<IProps>({
props: { prop1: Array, prop2: Array },
});
I would do:
import Vue, { PropType } from 'vue'
export default Vue.extend({
props: { prop1: Array as PropType<string[]>, prop2: Array as PropType<number[]>},
});
@wjw99830 That's working ! thanks
@pikax That's working too, fit for those who want to keep values and types in one place.
Note that if you want to declare a prop in an object fashion, you need to use PropOptions<type, isRequired> instead.
```ts
props: {
prop1: {
type: Array,
required: true,
default: ['a'],
} as PropOptions
}
@kukoo1 actually you don't need, just doing it on the type is enough :)
props: {
prop1: {
type: Array as PropType<Array[]>,
required: true,
default: ['a'],
},
}
is there any way to avoid providing the props attribute completely, like it says here? https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md#typescript-only-props-typing
That's for v3 only, @vue/composition-api runs on v2
This is supposed to provide the API that will come with Vue 3 though, right? I take it there's no way to opt out of providing the prop types as runtime values in Vue 2? Based on a few hacks I've tried, I would guess that is the case.
There're a few breaking changes on v3, this package is more as a POC and to allow devs to try out the new composition api.
This library is limited by the Vue2, some changes are not possible to do it in v2. As far as I know you can't opt-out, probably if you really want you can use $attrs, but that's an hacky way
Most helpful comment
@kukoo1 actually you don't need, just doing it on the type is enough :)