Getting "No overloaded matches this call" When Calling a Component With Props
scottxhe opened this issue · 0 comments
scottxhe commented
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"