我有一个boiler plate vue-cli install with TypeScript working to render JSX。但是,在将属性传递给 HelloWorld
组件时,如下所示:
export default Vue.extend({
name: 'App',
functional: true,
render() {
return (
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
);
},
});
通过为功能组件文件添加 msg
,我“成功”让 context
通过,如下所示:
export default Vue.extend({
name: 'HelloWorld',
functional: true,
props: {
msg: String,
},
render(h, context) {
return (
<div class="hello">
<h1>{ context.props.msg }</h1>
</div>
);
},
});
但是,我仍然在终端中遇到这个可怕的错误:
ERROR in /home/scott/convrrt-component/view-play/src/App.vue(25,21):
25:21 No overload matches this call.
Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<{ msg: string; } & Vue, object, object, object, never> | undefined): CombinedVueInstance<{ ...; } & Vue, object, object, object, Record<...>>', gave the following error.
Type '{ msg: string; }' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<{ msg: string; } & Vue, object, object, object, never>'.
Property 'msg' does not exist on type 'ThisTypedComponentOptionsWithArrayProps<{ msg: string; } & Vue, object, object, object, never>'.
Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<{ msg: string; } & Vue, object, object, object, object> | undefined): CombinedVueInstance<...>', gave the following error.
Type '{ msg: string; }' is not assignable to type 'ThisTypedComponentOptionsWithRecordProps<{ msg: string; } & Vue, object, object, object, object>'.
Property 'msg' does not exist on type 'ThisTypedComponentOptionsWithRecordProps<{ msg: string; } & Vue, object, object, object, object>'.
Overload 3 of 3, '(options?: ComponentOptions<{ msg: string; } & Vue, DefaultData<{ msg: string; } & Vue>, DefaultMethods<{ msg: string; } & Vue>, DefaultComputed, PropsDefinition<...>, Record<...>> | undefined): CombinedVueInstance<...>', gave the following error.
Type '{ msg: string; }' is not assignable to type 'ComponentOptions<{ msg: string; } & Vue, DefaultData<{ msg: string; } & Vue>, DefaultMethods<{ msg: string; } & Vue>, DefaultComputed, PropsDefinition<...>, Record<...>>'.
Property 'msg' does not exist on type 'ComponentOptions<{ msg: string; } & Vue, DefaultData<{ msg: string; } & Vue>, DefaultMethods<{ msg: string; } & Vue>, DefaultComputed, PropsDefinition<...>, Record<...>>'.
23 | // Needed to add in .eslintrc in rules a property of: "global-require": 0
24 | <img alt="Vue logo" src={require('@/assets/logo.png')} />
> 25 | <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
| ^
26 | </div>
27 | );
28 | },
Version: typescript 4.1.6
因此令人困惑的是它“有效”(它将字符串传递并呈现给 html),但随后给了我这个错误,似乎表明它不应该工作,因为类型不匹配和/或缺少 'msg ' 属性,所有这些都不是真的,基于 props
组件中的 HelloWorld
定义。
问题:发生了什么,我该如何消除终端中显示的这个错误?
答案 0 :(得分:0)
编辑: 似乎这是 Vue2 的一个已知问题,如果您尝试使用 Vue2,您基本上可以忘记 tsx 文件。至少当前的插件等似乎不能解决问题。 不过在 Vue3 中运行良好,仅供参考。
根据Vue的types文件
render?(this: undefined, createElement: CreateElement, context: RenderContext<Props>): VNode | VNode[];
所以我猜在渲染函数中使用 this 不是一个好主意,应该使用上下文。
我相信你应该为你的 msg prop 提供一个类型和可能的默认值
import Vue from 'vue';
export default Vue.extend({
name: 'HelloWorld',
functional: true,
props: {
msg: {
type: String,
default: ''
}
},
render(h, context) {
return (
<div class="hello">
<h1>{context.props.msg}</h1>
</div>
);
}
});
使用 TypeScript 和 Vue2 JSX 不会为我抛出任何错误。