在 Vue.js 中将 prop 传递给 JSX 组件时删除错误

Question

我有一个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>
    );
  },
});

通过为功能组件文件添加context，我“成功”通过了msg，如下所示：

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 ' 属性，所有这些都不是真的，基于HelloWorld 组件中的props 定义。

问题：发生了什么，如何消除终端中显示的这个错误？

Answer 1

编辑： 似乎这是 Vue2 的一个已知问题，如果您尝试使用 Vue2，您基本上可以忘记 tsx 文件。至少当前的插件等似乎没有奏效。 不过在 Vue3 中运行良好，仅供参考。

根据Vue的types文件

  render?(this: undefined, createElement: CreateElement, context: RenderContext<Props>): VNode | VNode[];

所以我猜测在渲染函数中使用 this 不是一个好主意，应该使用上下文。

我相信你应该为你的 msg 属性提供一个类型和可能的默认值

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 不会为我抛出任何错误。