Skip to content

TypeScript: can't infer prop names and types when contains any type prop #6841

Closed
@wonderful-panda

Description

@wonderful-panda

Version

2.5.2

Reproduction link

https://github.com/wonderful-panda/vue-sandbox

Steps to reproduce

Compile this code by tsc

import Vue, { VNode } from "vue";

const NgComponent = Vue.extend({
    name: "NgComponent",
    props: {
        foo: { type: String },
        bar: {}    // any types are accepted
    },
    render(h): VNode {
        return h("div", this.foo);
    }
});

or clone from repro link and npm install && npm run build

What is expected?

Successfully compiled.

And this.foo is treated as string, this.bar is treated as any.

What is actually happening?

Failed to compile.

src/index.ts(10,30): error TS2339: Property 'foo' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{}>>'.

Workaround:

import Vue, { VNode } from "vue";

Vue.extend({
    name: "Workaround",
    props: {
        foo: { type: String },
        bar: {} as (() => any)   // any types are accepted
    },
    render(h): VNode {
        return h("div", this.foo);
    }
});

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions