[FIX] when use class style, not use props with 'this'

[gozeon]

Error Screenshot

see https://github.com/wonderful-panda/vue-tsx-support#component-1

[wonderful-panda]

Yes. tsx.Component does not touch inner type other than $scopedSlots.

There are some workarounds.

1. Declare this explicitly.

class MyComponent extends tsx.Component<MyComponentProps, Events> {
  render(this: Vue & MyComponentProps) {
    return <button>{ this.text }</button>;
  }
}

2. Declare $props and access via it

class MyComponent extends tsx.Component<MyComponentProps, Events> {
  $props!: MyComponentProps;
  render() {
    return <button>{ this.$props.text }</button>;
  }
}

[gozeon]

@wonderful-panda thinks

[pksorensen]

I just use typescript properties instead

import Vue, { VNode } from 'vue';
import * as tsx from "vue-tsx-support";
import { Component, Prop, Watch } from 'vue-property-decorator';
 
export interface SiHomeSectionTags {
    title: string;
}
 
@Component
export default class SiHomeSection extends tsx.Component<SiHomeSectionTags>{

    @Prop()
    title!: string;
   
    render() {

        return [
            <header class="fxs-home-title" aria-label={this.title}>{this.title}</header>,
            <div class="fxs-home-section">
                {this.$slots.default}
            </div>
        ];
    }
         
}