Component created with createComponent() throws a type error when used in a render function about composition-api HOT 8 CLOSED

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.

from composition-api.

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

from composition-api.

@IceSentry Try the v2.2.0

from composition-api.

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.

from composition-api.

@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)

from composition-api.

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?

from composition-api.

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.

from composition-api.

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.

from composition-api.