wonderful-panda/vue-tsx-support

Getting "No overloaded matches this call" When Calling a Component With Props

scottxhe opened this issue · 0 comments

I have a child component

export default tsx.component({
    name: 'Person',
    props: {
        boo: {
            type: String,
            required: true
        },
        foo: {
            type: String,
        }
     },

when I call it with a prop in a parent

import Person ...
export default tsx.component({
    render(h): VNode {
        return (
            <div>
                <Person boo="boo"/>
            </div>
        )
    }
})

I'm getting these errors


No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, never> | undefined): CombinedVueInstance<...>', gave the following error.
    Type '{ boo: string; }' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, never>'.
      Property 'boo' does not exist on type 'ThisTypedComponentOptionsWithArrayProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, never>'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, object> | undefined): CombinedVueInstance<...>', gave the following error.
    Type '{ boo: string; }' is not assignable to type 'ThisTypedComponentOptionsWithRecordProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, object>'.
      Property 'boo' does not exist on type 'ThisTypedComponentOptionsWithRecordProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, object>'.
  Overload 3 of 3, '(options?: ComponentOptions<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, DefaultData<_TsxComponentInstanceV3<Vue & { ...; }, ... 4 more ..., {}>>, DefaultMethods<...>, DefaultComputed, PropsDefinition<...>, DefaultProps> | undefined): CombinedVueInstance<...>', gave the following error.
    Type '{ boo: string; }' is not assignable to type 'ComponentOptions<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, DefaultData<_TsxComponentInstanceV3<Vue & { ...; }, ... 4 more ..., {}>>, DefaultMethods<...>, DefaultComputed, PropsDefinition<...>, DefaultProps>'.
      Property 'boo' does not exist on type 'ComponentOptions<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: s 
. 4 more ..., {}>>, DefaultMethods<...>, DefaultComputed, PropsDefinition<...>, DefaultProps>'.
      Property 'boo' does not exist on type 'ComponentOptions<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, DefaultData<_TsxComponentInstanceV3<Vue & { ...; }, ... 4 more ..., {}>>, DefaultMethods<...>, DefaultComputed, PropsDefinition<...>, DefaultProps>'.
     7 |         return (
     8 |             <div>
  >  9 |                 <Person boo="boo"/>
       |                         ^
    10 |             </div>
    11 |         )
    12 |     }

It seems like props in the child were not getting recognized at all, there is no type of checking no required enforcement, nothing, I may have missed something basic here but please advise.

babel

module.exports = {
  "presets": [
	"@vue/app",
	["@vue/babel-preset-jsx"]
  ],
  "plugins": [
    "@babel/plugin

tsconfig

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
      "jsxFactory": "VueTsxSupport",
    "importHelpers": true,
    "moduleResolution": "node",
      "noImplicitAny": false,

package.json

    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@vue/composition-api": "^1.4.1",
    "vue": "^2.6.11",
    "vue-tsx-support": "^3.2.0",
    "@typescript-eslint/eslint-plugin": "^5.8.1",
    "@typescript-eslint/parser": "^5.8.1",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-plugin-typescript": "^4.5.15",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/eslint-config-typescript": "^10.0.0",
    "babel-plugin-component": "^1.1.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-preset-vca-jsx": "^0.3.6",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "typescript": "^4.5.4",
    "vue-template-compiler": "^2.6.11"