Using props in tsx is not possible

[DCzajkowski]

Version

3.0.1

Reproduction link

https://github.com/DCzajkowski/vue-jsx-reproduction

Node and OS info

Node v9.11.2 / yarn 1.9.4 / macOS

Steps to reproduce

$ yarn && yarn serve

What is expected?

Compilation successful.

What is actually happening?

An error appears

ERROR in /Users/Darek/web/sites/test2-vue-project/src/views/Home.tsx
9:21 Property 'msg' does not exist on type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> | ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | ThisTypedComponentOptionsWithRecordProps<...> | undefined'.
     7 |     return (
     8 |       <div class='home'>
  >  9 |         <HelloWorld msg='Welcome to Your Vue.js   TypeScript App' />
       |                     ^
    10 |       </div>
    11 |     )
    12 |   }
No lint errors found
Version: typescript 3.0.3, tslint 5.11.0
Time: 9742ms

---

I am very sorry if this is a set-up problem on my side or if it's not a correct repo to report this kind of stuff. I don't have experience with TSX and really can't find a solution to why this may not work. Sorry if it's a duplicate.

P.S. is vuejs/vue#6856 related?

[Leandro-Albano]

I got the same here.

Just created a component

import { Component, Vue, Prop } from 'vue-property-decorator';

@Component()
export default class NavLink extends Vue {

    @Prop()
    public widget!: string;

    @Prop({ default: '#' })
    public href!: string;

    @Prop()
    public toggle!: string;

    protected render(h: any) {
        return (
                <a class='nav-link' data-widget={this.widget} href={this.href} data-toggle={this.toggle}>
                    {this.$slots.default}
                </a>
        );
    }
}

And tried to use it in another one

import { Component, Vue } from 'vue-property-decorator';
import NavLink from '@/components/core/main-header/nav-link/nav-link';

@Component({
    components: {
        'nav-link': NavLink
    },
    name: 'main-header'
})
export default class MainHeader extends Vue {

    public render(h: any) {
        return (
            <NavLink widget='pushmenu'>
                <i class='fa fa-bars'></i>
            </NavLink>
        );
    }
}

Than I got the error

Property 'widget' does not exist on type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | ComponentOptions<...> | undefined'.

If instead of the <NavLink widget='pushmenu'> I use <nav-link widget='pushmenu'> it works fine. Or, if the attribute was something-widget instead of just widget, it works fine too.

[bobunderforest]

@Leandro-Albano your solution does not provide valid type checking for props. Bump the topic

[Peccansy]

same problem for me

[nandin-borjigin]

@Akryum OP has already provided a reproduction link.
If it's out-of-date or so, I just made another one: vue-tsx

you can reproduce by npm install npm run serve and then inpsect the typescript type-check error (the code compiles and works as expected, but the tsc emits an error and so does the VSCode)

[brunolau]

Same problem for me...is there any workaround that would keep the type-checking?

[ericettensohn]

Same here

[DCzajkowski]

@Akryum @yyx990803 Can we please get any update on that?

[DCzajkowski]

I have just cloned my repo, ran a fresh yarn and what I've noticed is that:

• it works in the browser
• error is thrown in the console, but it doesn't seem to mean anything (the in-browser code works)
• the code is continuously being rebuilt, even though there are no changes
• changing private to public does not affect the above behaviour

[brunolau]

I've managed to resolve the problem for my scenario using the following pattern
[sorry if the guide is a bit longer and not suitable for github, but might help some people having the same problem]

First of all I've extended the JSX.ElementAttributesProperty interface and created an abstract Vue extension class to serve as a base for the component. So let's create a ts file [e.g. vue-tsx.ts] somewhere in your project and place the following in there

import Vue from "vue";

export default abstract class TsxComponent<P> extends Vue {
    private vueTsxProps: Readonly<{}> & Readonly<P>;
}

declare global {
    namespace JSX {
        interface ElementAttributesProperty { vueTsxProps: {}; }
    }
}

Now the component has to be created using following pattern - It's essential that there's an interface defined and implemented by the component - ensures the type-safety. This is passed to the TsxComponent base class as a generic argument which creates the dummy vueTsxProps property (see the abstract class above), which is served to the TS typechecker as the valid parameter list. So let's create a sample component like this

import TsxComponent from "../../vuetsx"; //this is the relative path to the file created above
import { Component, Prop } from 'vue-property-decorator'

interface PersonDataArgs {
    username: string;
    age: number
}

@Component
export default class MyComponent extends TsxComponent<PersonDataArgs> implements PersonDataArgs {
    @Prop() username!: string;
    @Prop() age!: number;

    render() {
        return <span>Hello {this.username}, you are supposed to be {this.age} old</span>
    }
}

Now when using the component, correct type-checking is applied [1st one denied due to missing mandatory property, 2nd one ok, 3rd one denied due to unknown property applied]

[DCzajkowski]

@brunolau It's a nice hack, but it forces you to write types and prop declarations twice, which doesn't seem like a good idea :/

[brunolau]

Yes, that's the downside of the approach. However you are still protected by the compiler type checking. As you are both passing the interface type to the base class as well as implementing it on the component class, you are getting protected from making a typo on either side

Let's figure you want to add property "birthYear: number" to the component. If you forget to add it to the interface, you will get compile error from the TSX template and if you forget to add it to the component class, you will get compile error stating that the component class doesn't implement the interface.

Still, I fully agree that having to write the property twice isn't the ideal approach, however I wasn't able to find any other way besides not using the property decorators. [If you want to stick with props: {} annotation rather than property decorators, just change the "vueTsxProps" to "props" from my example and you should be good. There are also some other ways for property decorators, these will however make all the component properties optional as well as include all Vue base class properties in the intellisense, for more info see This issue on Typescript repo

As I wanted to stick with property decorators, I've decided to gowith the approach described above and I'm affraid that until the Vue version 3 is out, one will always have to choose the "smaller evil"

[Leandro-Albano]

@manneredboor ,

That was not a solution, I'm just giving as much info as I have about the issue. Maybe I should say that it compiles fine, not that it works fine.

[lmiller1990]

I have been using this library to great success, you can get typechecking for both props and events.
https://github.com/wonderful-panda/vue-tsx-support

There is also a vue-cli-plugin to configure it for you.

import * as tsx from 'vue-tsx-support'

const Foo = tsx.component({
  name: 'Foo',

  props: {
    msg: {
      type: String,
      required: true as true
    }
  },

  render() {
    return (
      <span>Hi</span>
    )
  }
})

const Test = {
  name: 'Test',

  components: {
    Foo
  },

  render() {
    return (
      <div>
        <Foo  /> // ERROR since you did not provide the props
      </div>
    )
  }
}