Vue Функциональные компоненты с TypeScript и JSX - PullRequest
Новая
       29

Vue Функциональные компоненты с TypeScript и JSX

0 голосов
/ 07 мая 2020

✌

У меня 2 компонента. Первый выглядит так: 

import { RenderContext, VNode } from 'vue';

import './BaseTitle.sass';

export interface IBaseTitleProps {
  level: number;
}

export const BaseTitle = (context: RenderContext<IBaseTitleProps>): VNode => {
  const { level } = context.props;
  const HeadingComponent = `h${level}`;
  return (
    <HeadingComponent
      class={`title base-title base-title_level-${level} ${context.data.staticClass || ''} ${context.data.class ||
        ''}`}>
      {context.children}
    </HeadingComponent>
  );
};

А второй: 

import { VueComponent } from 'types/vue-components';
import { Component } from 'nuxt-property-decorator';
import { VNode } from 'vue';
import { BaseTitle } from 'components/base/BaseTitle';

@Component({
  name: 'TheHeader',
})
export default class TheHeader extends VueComponent {
  public render(): VNode {
    return (
      <header class='page-header'>
        <BaseTitle level={4}>Page title</BaseTitle>
      </header>
    );
  }
}

Я получаю сообщение об ошибке, когда передаю туда опору level. 

TS2322: Type '{ level: number; }' is not assignable to type 'RenderContext<IBaseTitleProps>'.   Property 'level' does not exist on type 'RenderContext<IBaseTitleProps>'.

RenderContext интерфейс. 

export interface RenderContext<Props=DefaultProps> {
  props: Props;
  children: VNode[];
  slots(): any;
  data: VNodeData;
  parent: Vue;
  listeners: { [key: string]: Function | Function[] };
  scopedSlots: { [key: string]: NormalizedScopedSlot };
  injections: any
}

Я могу переписать его примерно так 

<BaseTitle
    props={{
     level: 4,
    }}
 />

, но он также требует, чтобы я пропустил все остальные поля из RenderContext интерфейс

Как правильно использовать функциональные компоненты и TypeScript? Есть какой-нибудь пример? Спасибо.

...