question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using factory function and type assertion with props causes type error

See original GitHub issue

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<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>’.


It did not occur version 2.5.17.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
wakame-isonocommented, 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 🙇‍♀️ 🙏

0reactions
wakame-isonocommented, 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 🙇‍♀️ 🙏 🙏

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found