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

feat: Add Annotating Props to Typescript page #2068

Merged
merged 7 commits into from Apr 20, 2020

Conversation

pikax
Copy link
Member

@pikax pikax commented Mar 19, 2019

Adding some examples on how to annotate props with typescript

src/v2/guide/typescript.md Outdated Show resolved Hide resolved
// without argument type
validation: function(message){
return !!message.title;
} as (arg: ComplexMessage) => boolean
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think anyone would ever do this, and it's very similar to the previous example. A better one would be notificationMessage: {...} as PropValidator<ComplexMessage> with no annotation on the validator or type.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense

src/v2/guide/typescript.md Outdated Show resolved Hide resolved
@NataliaTepluhina
Copy link
Member

NataliaTepluhina commented Mar 19, 2019

The only issue I can see is if you try to do

  callback: {
    type: Function as PropType<() => void>
  },

You will have an error

Type 'FunctionConstructor' cannot be converted to type 'PropType<() => void>'.
  Type 'FunctionConstructor' is not comparable to type 'Prop<() => void>[]'.

Surprisingly, error is gone if you fix it to be PropType<void> 🤔

@pikax
Copy link
Member Author

pikax commented Mar 19, 2019

That issue is: vuejs/vue#9692

It will be fixed on the next release:
vuejs/vue@df4af4b

@KaelWD
Copy link
Contributor

KaelWD commented Mar 20, 2019

Ah nice. @pikax you can probably remove that as any then.

@pikax
Copy link
Member Author

pikax commented Mar 20, 2019

I didn't even notice that as any thought the suggestion was only for code style.

validation: (message) => {
return !!message.title;
}
} as PropValidator<ComplexMessage>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not use PropValidator as it is not meant to be used on userland. Is there any case PropType is not sufficient?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just wanted to provide other ways to allow forcing the PropValidator, when you don't send the validation parameter type typescript has some problems to get type explicity, it will complain about implicit 'any'.
Other way to fix this would be annotate the validation with as (message: ComplexMessage)=>boolean or simply set the type on the parameter.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then let's just annotate validator parameter 🙂

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is no need for that example then 🙂

}
})
```
If you find validator not getting type inference or member completion isn't working, annotating the argument the the expected type may help address these problems;
Copy link
Contributor

@KaelWD KaelWD Mar 20, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the the

;

src/v2/guide/typescript.md Outdated Show resolved Hide resolved
@pikax pikax requested a review from phanan September 23, 2019 10:02
@jagged3dge
Copy link

This ever gonna make it in?

@pikax pikax requested a review from ktsn April 20, 2020 08:24
@phanan phanan merged commit b97abcd into vuejs:master Apr 20, 2020
@pikax pikax deleted the ts-prop-annotation branch May 20, 2020 08:10
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

Successfully merging this pull request may close these issues.

None yet

6 participants