Question

对于初学者来说，我在此jsx: "preserve"文件中使用了jsx.d.ts，该文件来自Google对这个主题的快速搜索。

import Vue, {VNode} from "vue";

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

不幸的是，尽管我发现的所有内容几乎都提供了这个确切的声明文件，但是关于如何将JSX与自定义组件一起使用的结果并没有进一步深入。

就我而言，我有一个用Vue.extend()定义的组件，希望在JSX中使用。此组件是名为SomeComponent.tsx的文件中的默认导出。导致问题的代码如下所示。

import Vue, {CreateElement} from "vue";

import SomeComponent from "./SomeComponent.tsx";

export default Vue.extend({
  name: "SomeOtherComponent",
  functional: true,
  render: (h: CreateElement) => (
    <div class="something">
      <SomeComponent
        class="something-else"
        someProp={1234}
      >
        Slot Content
      </SomeComponent>
    </div>
  )
});

编译在第11行第9列失败，并显示以下消息：TS2339: Property 'class' does not exist on type 'ComponentOptions<Record<string, any> & Vue, DefaultData<Record<string, any> & Vue>, DefaultMethod...'。

我了解它无法对自定义组件上class="something-else"的使用进行类型检查。
摘自GitHub上的JSX in TypeScript提案：

<Something x={expr1} { ...spr } y={expr2} />
  给定上例中从E派生的元素属性类型Something，该元素的属性按以下方式检查：

如果属性是使用P初始化的普通属性expr：
  如果E具有属性P，请使用expr类型的上下文类型处理E.P。否则，发出错误。
  如果expr无法分配给E.P，则会出错。

但是，我不知道/不了解的是我如何能够获得class属性以正确地进行类型检查，即我需要以哪种方式调整{{1} }。

如果需要的话，我也可以禁用JSX的类型检查，但是我不确定我该怎么做。这是我到目前为止尝试过的。

根据上面链接的提案

如果元素类型为jsx.d.ts，则元素实例类型为any。

我尝试通过将any替换为JSX.ElementClass来将any设置为interface ElementClass extends Vue {}，但是在相同的位置却因相同的错误而失败。

我还尝试根据{p>将type ElementClass = any添加到我的interface ElementAttributesPropert {}中

接口jsx.d.ts定义了此过程。它可能具有0个属性，在这种情况下，假定所有属性均为有效，并且类型为JSX.ElementAttributesProperty，[...]。

这又产生了另一个错误，即

any

我知道这段代码应该有效，因为在手动删除TypeScript部件并接收到预期的输出之后，我已经通过Babel运行了该代码。

为Matt McCutchen编辑：

这是我所拥有的TS2322: Type '{ class: string; someProp: number; }' is not assignable to type 'CombinedVueInstance<Record<string, any> & Vue, object, object, object, Record<never, any>>'. Type '{ class: string; someProp: number; }' is not assignable to type 'Vue'. Property '$el' is missing in type '{ class: string; someProp: number; }'.的定义。它几乎只是围绕SomeComponent进行包装，以进行点击操作。像常规模板中的超级按钮一样工作，例如证监会<router-link />。我尝试使用JSX解决此问题的唯一原因是this模板和功能组件存在问题。

<template>

Answer 1

通过在namespace JSX中的jsx.d.ts中添加以下内容，我能够关闭JSX属性的类型检查：

type LibraryManagedAttributes<C, P> = {[name: string]: any};

（出于我尚未调查的原因，type LibraryManagedAttributes<C, P> = any;无法正常工作。）

获得正确的类型检查将是定义JSX.LibraryManagedAttributes以便根据组件类型计算组件的JSX属性类型的问题。但是this comment表示Vue的计算非常复杂（与React相比）。

无法在TSX

为Matt McCutchen编辑：

1 个答案: