wonderful-panda/vue-tsx-support

Convertion does not work properly

Closed this issue · 5 comments

eakarpov commented 
        const ToolbarTyped = tsx.ofType<{ tools: ITool[] }>().convert(Toolbar);
        return (
            <div>
                <ToolbarTyped tools={this.tools} />
            </div>);

Error:(34, 18) TS2322: Type '{ tools: ITool[]; }' is not assignable to type 'ComponentOptions<{ _tsxattrs: TsxComponentAttrs<{ tools: ITool[]; }, {}, {}>; } & Toolbar, DefaultData<{ _tsxattrs: TsxComponentAttrs<{ tools: ITool[]; }, {}, {}>; } & Toolbar>, DefaultMethods<{ _tsxattrs: TsxComponentAttrs<...>; } & Toolbar>, DefaultComputed, PropsDefinition<...>, Record<...>>'.
Property 'tools' does not exist on type 'ComponentOptions<{ _tsxattrs: TsxComponentAttrs<{ tools: ITool[]; }, {}, {}>; } & Toolbar, DefaultData<{ _tsxattrs: TsxComponentAttrs<{ tools: ITool[]; }, {}, {}>; } & Toolbar>, DefaultMethods<{ _tsxattrs: TsxComponentAttrs<...>; } & Toolbar>, DefaultComputed, PropsDefinition<...>, Record<...>>'.

wonderful-panda commented

@eakarpov
can you show me type of Toolbar ?

I guess Toolbar is ComponentOptions itself (like { props: {...}, computed: {...} })
convert() only accepts Vue constructor for now. (like Vue.extend({ props: {...}, ... }))

This workaround should work

const ToolbarTyped = tsx.ofType<{ tools: ITool[] }>().convert(Vue.extend(Toolbar));
// or
const ToolbarTyped = tsx.ofType<{ tools: ITool[] }>().convert(Toolbar as any as typeof Vue);
eakarpov commented

@wonderful-panda I fixed the problem by changing tsx-shims.d.ts file as yours in this repository. Toolbar is an instance of VueConstructor, so it suits the convert method.

wonderful-panda commented

@eakarpov
Does original tsx-shims.d.ts come from vue-cli ? (I'm not so familiar to vue-cli)
If yes, I'll add this problem as FAQ to README.

eakarpov commented

@wonderful-panda Yes, the original one was generated by vue-cli.