Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update v0.3.2 breaks Typescript-only type of props #146

Closed
kukoo1 opened this issue Sep 26, 2019 · 8 comments
Closed

Update v0.3.2 breaks Typescript-only type of props #146

kukoo1 opened this issue Sep 26, 2019 · 8 comments

Comments

@kukoo1
Copy link

kukoo1 commented Sep 26, 2019

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.
0565acb#diff-f2fa4059dd5efeb563915aed92f20664R81
From PropsOptions = ComponentPropsOptions to PropsOptions extends ComponentPropsOptions = ComponentPropsOptions

How to exactly declare props type using typescript ?

@kukoo1 kukoo1 changed the title Update v0.3.2 break props Typescript-only type Update v0.3.2 breaks props Typescript-only type Sep 26, 2019
@kukoo1 kukoo1 changed the title Update v0.3.2 breaks props Typescript-only type Update v0.3.2 breaks Typescript-only type of props Sep 26, 2019
@wjw99830
Copy link
Contributor

This works:

interface IProps {
  prop1: string[];
  prop2: number[];
}
export default createComponent<IProps>({
  props: { prop1: Array, prop2: Array },
});

@pikax
Copy link
Member

pikax commented Sep 27, 2019

I would do:

import Vue, { PropType } from 'vue'
export default Vue.extend({
  props: { prop1: Array as PropType<string[]>, prop2: Array as PropType<number[]>},
});

@kukoo1
Copy link
Author

kukoo1 commented Sep 27, 2019

@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.

props: {
    prop1: {
        type: Array,
        required: true,
        default: ['a'],
    } as PropOptions<string[], true>,
}

@kukoo1 kukoo1 closed this as completed Sep 27, 2019
@pikax
Copy link
Member

pikax commented Sep 27, 2019

@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'],
    },
}

@mikeyhew
Copy link

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

@pikax
Copy link
Member

pikax commented Nov 12, 2019

That's for v3 only, @vue/composition-api runs on v2

@mikeyhew
Copy link

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.

@pikax
Copy link
Member

pikax commented Nov 13, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants