Props not recognized by Typescript when using render functions

Defining props works great unless you’re using render functions. In that case, Typescript will detect an error TS2322. Not sure what does Typescript expect from the component type to work…

Below is an example of the error. I could provide a minimal repository if someone needs to play with it.

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

@Component
export class Heading1 extends Vue {
    @Prop({ type: String, default: "" })
    public readonly title!: string;

    public render(): JSX.Element {
        return <h1>{this.title}</h1>;
    }
}

@Component
export class Page extends Vue {
    public render(): JSX.Element {
        return <Heading1 title="Test" />;
    }
}

index.tsx:16:17 - error TS2322: Type '{ title: string; }' is not assignable to type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
  Property 'title' does not exist on type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.

16         return <Heading title="Test" />;
                   ~~~~~~~


Found 1 error.

[ArmorDarks]

Turns out you need to explicitly register used components. You can’t use imported components directly:

won’t work:

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

import Layout from './components/Layout'

@Component
export default class App extends Vue {
  render () {
    // Will error
    return <Layout class='something'><router-view /></Layout>
  }
}

will work

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

import Layout from './components/Layout'

@Component({
  components: {
    Layout
  }
})
export default class App extends Vue {
  render () {
    return <layout class='something'><router-view /></layout>
  }
}

No attributes suggestions will be provided by VS Code anyway, though.

Registering manually each component feels like a sad step-back to old Vue-ways, but for now, seems to be the only “proper” way.

[kaorun343]

@skyrpex

Hi.

When defining Vue component with vue-class-component, TS compiler cannot detect which properties are defined as props. On the other hand, when defining with Vue.extend, it can.

There’s no solution that vue-property-decorator can provide. Could ask this issue at vue or vue-class-component repository instead? Thanks.