How to use the vue-tsx-support.ofType function in vue-tsx-support

function by_convert() {
    const Base = vuetsx.ofType().convert(Vue.extend({}));

    /* add more attributes */
    const Extend = vuetsx.ofType().extendFrom(Base);
    // OK
     console.log(s) } />;
    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'bar' is missing
    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'foo' is missing

    const WithNativeOn = vuetsx.withNativeOn(Base);
    ;

    const WithHtmlAttrs = vuetsx.withHtmlAttrs(Base);
    ;

function by_convert() {
    const Base = vuetsx.ofType().convert(Vue.extend({}));

    /* add more attributes */
    const Extend = vuetsx.ofType().extendFrom(Base);
    // OK
     console.log(s) } />;
    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'bar' is missing
    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'foo' is missing

    const WithNativeOn = vuetsx.withNativeOn(Base);
    ;

    const WithHtmlAttrs = vuetsx.withHtmlAttrs(Base);
    ;

    const WithUnknownProps = vuetsx.withUnknownProps(Base);
    ;
}

function by_class() {
    class Base extends vuetsx.Component {
        someProp: string = "foo";
        someMethod() {
        }
    }

    /* add more attributes */
    const Extend = vuetsx.ofType().extendFrom(Base);
    // OK
     console.log(s) } />;
    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'bar' is missing
    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'foo' is missing

    // Extend inherits prototype of Base.
    const ext = new Extend();
    console.log(ext.someProp, ext.someMethod());

    const WithNativeOn = vuetsx.withNativeOn(Base);
    ;
    console.log(new WithNativeOn().someProp);

    const WithHtmlAttrs = vuetsx.withHtmlAttrs(Base);

function by_createComponent() {
    const Base = vuetsx.createComponent({});

    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'foo' is missing
    // OK
    ;
    // NG
    ;   //// TS2322 | TS2339 | TS2769: Property 'bar' does not exist
    // NG
    ;   //// TS2322 | TS2339 | TS2769: Property 'onErr' does not exist

    /* add more attributes */
    const Extend = vuetsx.ofType().extendFrom(Base);
    // OK
     console.log(s) } />;
    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'bar' is missing
    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'foo' is missing

    const WithNativeOn = vuetsx.withNativeOn(Base);
    ;

    const WithHtmlAttrs = vuetsx.withHtmlAttrs(Base);
    ;

    const WithUnknownProps = vuetsx.withUnknownProps(Base);
    ;
}

const Base = vuetsx.componentFactoryOf().create({
        props: {
            foo: String
        },
        computed: {
            someProp(): string {
                return "";
            }
        },
        methods: {
            someMethod() {}
        }
    }, ["foo"]);

    /* add more attributes */
    const Extend = vuetsx.ofType().extendFrom(Base);
    // OK
     console.log(s) } />;
    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'bar' is missing
    // NG
    ;   //// TS2322 | TS2326 | TS2769: 'foo' is missing

    // Extend inherits prototype of Base.
    const ext = new Extend();
    console.log(ext.someProp, ext.someMethod());

    const WithNativeOn = vuetsx.withNativeOn(Base);
    ;
    console.log(new WithNativeOn().someProp);

    const WithHtmlAttrs = vuetsx.withHtmlAttrs(Base);

interface ScopedSlots {
  default: any;
}

interface Events {
    // all memebers must be prefixed by 'on'
    onShow: (evt: any) => void;
    onHide: (evt: any) => void;
    // If event handler has only one parameter, you can specify parameter type as a shorthand.
    // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`
    onInput: { value: any };
    onBeforeShow: {evt: Event};
    onBeforeHide: {evt: Event};
}

export const QPopupProxy = tsx.ofType().convert(Comp);

default: any;
  loading: any;
}

interface Events {
    // all memebers must be prefixed by 'on'
    onShow: (evt: any) => void;
    onHide: (evt: any) => void;
    // If event handler has only one parameter, you can specify parameter type as a shorthand.
    // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`
    onInput: { value: any };
    onBeforeShow: {evt: Event};
    onBeforeHide: {evt: Event};
}

export const QBtn = tsx.ofType().convert(Comp);

interface ScopedSlots {
  default: any;
}

interface Events {
    // all memebers must be prefixed by 'on'
    onShow: (evt: any) => void;
    onHide: (evt: any) => void;
    // If event handler has only one parameter, you can specify parameter type as a shorthand.
    // For example, this is equivalent to `onError: (arg: { code: number, detail: string }) => void`
    onInput: { value: any };
    onBeforeShow: {evt: Event};
    onBeforeHide: {evt: Event};
}

export const QToolbar = tsx.ofType().convert(Comp);

export const QToolbarTitle = tsx.ofType().convert(Title);

bordered?: boolean;
}

interface SectionProps {
  align?: 'left' | 'center' | 'right' | 'between' | 'around';
  vertical?: boolean;
}

interface ScopedSlots {
  default: any;
}

interface Events {
}

export const QCard = tsx.ofType().convert(Comp);

export const QCardSection = tsx.ofType().convert(CompSection);