Using factory function and type assertion with props causes type error
See original GitHub issueVersion
2.6.8
Reproduction link
https://github.com/wakame-isono/vue-typescript-issue
Steps to reproduce
- Use vue-cli init with TypeScript without using class-style.
- Add code to src/components/HelloWorld.vue as follow.
<script lang="ts">
import Vue, { PropType } from 'vue'
interface Test {
a: string;
}
export default Vue.extend({
name: 'HelloWorld',
props: {
msg: String,
test: {
type: Object as PropType<Test>,
default: () => ({})
}
},
created () {
console.log(this.test)
}
})
</script>
What is expected?
Type errors does not occur.
What is actually happening?
Property ‘test’ does not exist on type ‘ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>’.
It did not occur version 2.5.17.
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
Error message. "Props with type Object/Array must use a ...
A factory function in props looks like this: props: { exampleDefaultObject: { type: Object, default() { return {} } }, exampleDefaultArray: ...
Read more >Why You Should Avoid Type Assertions in TypeScript
We should use Type Annotations over Type Assertions. This enforces type safety and will cause compile-time errors if the declared type is ...
Read more >Guides:TypeScript - SolidJS · Reactive Javascript Library
Another common pattern is to define a factory function that produces the value for a context. Then we can grab the return type...
Read more >Overview - TypeScript
This page is a shorter overview of features added per version. ... The const assertion allowed TypeScript to take the most specific type...
Read more >Documentation - JSX - TypeScript
*Note: You can specify the JSX factory function to use when targeting ... As a result, TypeScript disallows angle bracket type assertions in...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I have used with Vue + TypeScript without using class-style since ver 2.5. If possible, I would like to get solutions to this problem without using these packages 🙇♀️ 🙏
Thank you very much for help 🙇♀️ 🙏 🙏 It works!! I defined incorrect an association type and missed that typs of PropOptions type was changed 😫💦
Thank you for sparing your time for this issue and I will close the issue myself 🙇♀️ 🙏 🙏