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

Using factory function and type assertion with props causes type error #9861

Closed
wakame-isono opened this Issue Apr 11, 2019 · 7 comments

Comments

Projects
None yet
3 participants
@wakame-isono
Copy link

wakame-isono commented Apr 11, 2019

Version

2.6.8

Reproduction link

https://github.com/wakame-isono/vue-typescript-issue

Steps to reproduce

  1. Use vue-cli init with TypeScript without using class-style.
  2. 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, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.


It did not occur version 2.5.17.

@underfin

This comment has been minimized.

Copy link

underfin commented Apr 11, 2019

@wakame-isono
The props should use as follow. In your case, props will be a property in data, should use with this.props.test.
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}

@wakame-isono

This comment has been minimized.

Copy link
Author

wakame-isono commented Apr 12, 2019

Thank you for advice 🙇‍♀️ 🙇‍♀️ 🙇‍♀️
I am confused...I should use this.props.test 😢 ?

In this state, even I try to add data, computed and method and try to access these, the same error occurs for each of these properties. And I founded the following pattern also occors the same error 😭

props: {
  test: {
    type: Array,
    default: () => []
  }
},
@underfin

This comment has been minimized.

Copy link

underfin commented Apr 12, 2019

@wakame-isono
https://github.com/vuejs/vue-class-component
https://github.com/kaorun343/vue-property-decorator
You can use data computed method props with the above packages, learn it, please.

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Apr 15, 2019

@chrislentz please stop spamming or I'll have to block you.

@vuejs vuejs deleted a comment from chrislentz Apr 15, 2019

@vuejs vuejs deleted a comment from chrislentz Apr 15, 2019

@vuejs vuejs deleted a comment from chrislentz Apr 15, 2019

@vuejs vuejs deleted a comment from chrislentz Apr 15, 2019

@vuejs vuejs deleted a comment from chrislentz Apr 15, 2019

@wakame-isono

This comment has been minimized.

Copy link
Author

wakame-isono commented Apr 15, 2019

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 🙇‍♀️ 🙏

@underfin

This comment has been minimized.

Copy link

underfin commented Apr 15, 2019

I see. It works with follow code.
props: {
msg: String,
test: {
type: Object as PropType<Test>,
default: () => ({} as Test)
}
}
PropOptions default return type only T | null | undefined.
export interface PropOptions<T=any> {
type?: PropType<T>;
required?: boolean;
default?: T | null | undefined | (() => T | null | undefined);
validator?(value: T): boolean;
}

@wakame-isono

This comment has been minimized.

Copy link
Author

wakame-isono commented Apr 15, 2019

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 🙇‍♀️ 🙏 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.