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

function standardComponent() {
    const MyComponent = tsx.component({
        props: {
            foo: String,
            bar: Number,
            baz: String
        },
        render(): VNode {
            return <span>{this.foo}</span>;
        }
    }, /* requiredPropNames */ ["foo", "bar"]);

    /* OK */
    ;
    // baz is optional
    ;
    // other known attributes
    ;

function functionalComponent() {
    const MyComponent = tsx.component({
        functional: true,
        props: {
            foo: String,
            bar: Number,
            baz: String
        },
        render(_h, ctx): VNode {
            return <span>{ctx.props.foo}</span>;
        }
    }, ["foo", "bar"]);
    /* OK */
    ;
    // baz is optional
    ;
    // other known attributes
    ;

function withWrongRequiredPropNames() {
    const MyComponent = tsx.component({ props: { foo: String } }, ["foo", "unknown"]);    //// TS2345 | TS2769
}

function standardComponent() {
  const MyComponent = tsx.component({
    props: {
      foo: { type: String, required: true as true },
      bar: Number
    },
    render(): VNode {
      return <span>{this.foo}</span>;
    }
  });

  /* OK */
  ;
  // bar is optional
  ;
  ; //// TS2322 | TS2769: 'foo' is missing

  const MyComponent2 = tsx.withPropsObject(MyComponent);

it("accessing base component members", () => {
      const BaseComponent = tsx.component({
        props: {
          foo: String
        },
        computed: {
          bar() {
            return "bar";
          }
        }
      });

      const ExtendedComponent = tsx.extendFrom(BaseComponent).create({
        props: {
          baz: String
        },
        render(): VNode {
          return <span>{this.foo + this.bar + this.baz}</span>;

it("simple component", () => {
      const MyComponent = tsx.component(
        {
          props: {
            foo: String,
            bar: { type: String, default: "barDefault" }
          },
          render(): VNode {
            return <span>{this.foo + " " + this.bar}</span>;
          }
        },
        ["foo"]
      );

      const w = mount(MyComponent, { propsData: { foo: "fooValue" } });
      expect(w.html()).toBe("<span>fooValue barDefault</span>");
    });

it("scoped slot", () => {
      const ChildComponent = tsx
        .componentFactoryOf<{}, { default: string }>()
        .create({
          props: {
            foo: String
          },
          render(): VNode {
            return <div>{this.$scopedSlots.default(this.foo)}</div>;
          }
        });

      const ParentComponent = tsx.component({
        render(): VNode {
          return (
             [<span>{v}</span>]
              }}
            /&gt;
          );
        }
      });

      const w = mount(ParentComponent);
      expect(w.html()).toBe("<div><span>fooValue</span></div>");
    });
  });

function basicFunctionary() {
    const factory = vuetsx.componentFactory.mixin({
        props: { foo: String },
        computed: {
            fooUpper(): string {
                return this.foo.toUpperCase();
            }
        }
    }).mixin(vuetsx.component({
        props: { bar: String },
        computed: {
            barUpper(): string {
                return this.bar.toUpperCase();
            }
        }
     }, ["bar"])
    ).mixin(Vue.extend({
        data() {
            return { baz: "piyo" }
        }
    }));

    const Component = factory.create({
        props: { bra: Number },
        render(): VNode {

function extendFrom() {
    /*
     * extend from tsx component
     */
    const Base1 = tsx.component({
        props: { foo: String },
        computed: {
            fooUpper(): string {
                return this.foo.toUpperCase();
            }
        }
    }, ["foo"]);

    const Ext1 = tsx.extendFrom(Base1).create({
        props: { bar: String },
        render(): VNode {
            return <div>{this.fooUpper + this.bar}</div>;
        }
    });

    ;