Component created with createComponent() throws a type error when used in a render function

[IceSentry]

This sandbox reproduces the error I get in App.tsx

https://codesandbox.io/s/vue-function-api-typescript-issue-vrycw

For some reason the sandbox fails to import the components, but the code actually works when opened in vscode.

The code actually works without issue, it's just that typescript complains that JSX element type 'HelloWorld' does not have any construct or call signatures. when using a component declared with createComponent and a render function

[skyrpex]

Yeah, I've got rid of the error by modifying the dist/ts-api/index.d.ts file:

import Vue, { ComponentOptions, VueConstructor } from 'vue';
import { Context } from '../types/vue';
export declare type PropType<T> = T;
declare type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
declare type ComponentOptionsWithSetup<Props> = Omit<ComponentOptions<Vue>, 'props' | 'setup'> & {
    props?: Props;
    setup?: (this: undefined, props: {
        [K in keyof Props]: Props[K];
    }, context: Context) => object | null | undefined | void;
};
export declare function createComponent<Props>(compOpions: ComponentOptionsWithSetup<Props>): ComponentOptions<Vue> & VueConstructor<Vue>;
export {};

Typescript expects something like the VueConstructor type to be rendered in JSX.

[IceSentry]

This works, but now I receive an error on props saying the types are not assignable to type TsxComponentAttrs<{}, {}, {}>

[liximomo]

@IceSentry Try the v2.2.0

[IceSentry]

With 2.2.0 createComponent asks for a RawBindings type parameter if I want to pass it a Props interface, but I do not know what it's supposed to be. Also it complains that name isn't a valid property for ComponentOptions. I get a bunch of really cryptic error message when trying to use a component declared with createComponent

JSX element type 'ComponentRenderProxy<ExtractPropTypes<Props, true>, { tag?: string | undefined; data?: { key?: string | number | undefined; slot?: string | undefined; scopedSlots?: { [x: string]: ScopedSlot | undefined; } | undefined; ... 17 more ...; keepAlive?: boolean | undefined; } | undefined; ... 12 more ...; isComment: boole...' is not a constructor function for JSX elements.
  Type 'ComponentRenderProxy<ExtractPropTypes<Props, true>, { tag?: string | undefined; data?: { key?: string | number | undefined; slot?: string | undefined; scopedSlots?: { [x: string]: ScopedSlot | undefined; } | undefined; ... 17 more ...; keepAlive?: boolean | undefined; } | undefined; ... 12 more ...; isComment: boole...' is missing the following properties from type 'ElementClass': $el, $options, $children, $scopedSlots, and 19 more.ts(2605)
---
JSX element class does not support attributes because it does not have a '_tsxattrs' property.ts(2607)

I'm probably doing something wrong, but I don't really have time to thinker with it and figure out what's wrong. I'll give a better bug report later this week.

[beeplin]

@liximomo @IceSentry I got the same typing error when using a component created by createComponent with 2.2.0 in JSX:

JSX element type 'ComponentRenderProxy<ExtractPropTypes<{ am: { type: StringConstructor; default: null; }; latex: { type: StringConstructor; default: null; }; display: { type: StringConstructor; default: null; }; }, true>, () => Element, ExtractPropTypes<...>>' is not a constructor function for JSX elements. Type 'ComponentRenderProxy<ExtractPropTypes<{ am: { type: StringConstructor; default: null; }; latex: { type: StringConstructor; default: null; }; display: { type: StringConstructor; default: null; }; }, true>, () => Element, ExtractPropTypes<...>>' is missing the following properties from type 'ElementClass': $el, $options, $children, $scopedSlots, and 19 more.ts(2605)

[IceSentry]

At this point I believe my issue is the same as #63. Essentially, the types still needs some work.

Should I close this issue in favor of #63?

[beeplin]

The typing error shown above is actually caused by the hack given in #63 (comment). @IceSentry

Without the hack the JSX typing is all fine.

[IceSentry]

I personally did not try the hack so I assumed it was related but not the same thing.

Either way, it's pretty obvious at this point that the typing for createComponent() should somehow extend the Vue instance to be closer to the RFC. I'm not familiar enough yet with creating advanced type system with typescript to create a PR to fix this. I think I'll just wait for Vue 3 and try again at that point. The project I was trying to port to this is on hold for now anyway, so I don't even use vue at the moment.