Невозможно использовать атрибуты HTML в пользовательских компонентах в TSX

Для начала я использую 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" в пользовательском компоненте. Взято из предложения JSX в TypeScript на GitHub:

<Something x = {expr1} { ...spr } y = {expr2} />
Given an element attributes type E derived from Something in the above example, the attributes of the element are checked as follows:

If the attribute is a normal attribute P initialized with expr:
If E has a property P, process expr with the contextual type of the type of E.P. Otherwise, issue an error.
It is an error if expr is not assignable to E.P.

Однако я не знаю / не понимаю, как я смогу получить атрибут class для правильной проверки типа, то есть каким образом мне нужно будет настроить свой jsx.d.ts.

В случае необходимости я бы тоже согласился отключить проверку типов для JSX, но я не уверен, как бы я это сделал. Вот что я пробовал до сих пор.

Согласно предложению, указанному выше

If the element type is any, the element instance type is any.

Я попытался установить JSX.ElementClass на any, заменив interface ElementClass extends Vue {} на type ElementClass = any, но это не удалось с той же ошибкой в ​​том же месте.

Я также пробовал добавить interface ElementAttributesPropert {} в свой jsx.d.ts, в соответствии с

The interface JSX.ElementAttributesProperty defines this process. It may have 0 properties, in which case all attributes are assumed to be valid and of type any, [...].

Это, в свою очередь, приводит к другой ошибке, а именно:

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; }'.

Я знаю, что этот код должен работает, поскольку я запустил его через Babel после ручного удаления частей TypeScript и получения ожидаемого результата.

Редактировать для Мэтта Маккатчена:

Это определение SomeComponent, которое у меня есть. Это в значительной степени просто оболочка для <router-link />, настроенная на выполнение чего-то дополнительного при щелчке мышью. Прекрасно работает в обычных шаблонах, например. SFC <template>. Единственной причиной, по которой я пытался решить эту проблему с помощью JSX, была проблема это с шаблонами и функциональными компонентами.

import Vue, {CreateElement, RenderContext} from "vue";

export default Vue.extend({
  name: "SomeComponent",
  functional: true,
  render(h: CreateElement, {children, data}: RenderContext) {
    const doStuff = () => console.info("Hello there!");

    return (
      <router-link
        {...data}
        nativeOnClick = {doStuff}
      >
        {children}
      </router-link>
    );
  }
});