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

});

    ;
    ;        //// TS2322 | TS2326 | TS2769: 'foo' is missing
    ;    //// TS2322 | TS2339 | TS2769: 'baz' does not exist

    /*
     * extend from standard component
     */
    const Base3 = Vue.extend({
        data() {
            return { foo: "fooValue" };
        }
    });

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

    ;
    ;
    ;    //// TS2322 | TS2339 | TS2769: 'baz' does not exist


    /*
     * extend from standard class base component
     */

;
    ;
    ;    //// TS2322 | TS2339 | TS2769: 'baz' does not exist


    /*
     * extend from standard class base component
     */
    class Base4 extends Vue {
        get foo() {
            return "fooValue";
        }
    }

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

    ;
    ;
    ;    //// TS2322 | TS2339 | TS2769: 'baz' does not exist
}

});

    ;
    ;        //// TS2322 | TS2326 | TS2769: 'foo' is missing
    ;    //// TS2322 | TS2339 | TS2769: 'baz' does not exist

    /*
     * extend from class base tsx component
     */
    class Base2 extends tsx.Component<{ foo: string }, { onOk: string }> {
        get fooUpper() {
            return this.$props.foo.toUpperCase();
        }
    }

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

    ;
    ;        //// TS2322 | TS2326 | TS2769: 'foo' is missing
    ;    //// TS2322 | TS2339 | TS2769: 'baz' does not exist

    /*
     * extend from standard component
     */
    const Base3 = Vue.extend({
        data() {
            return { foo: "fooValue" };

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>;
        }
    });

    ;
    ;        //// TS2322 | TS2326 | TS2769: 'foo' is missing
    ;    //// TS2322 | TS2339 | TS2769: 'baz' does not exist

    /*
     * extend from class base tsx component
     */
    class Base2 extends tsx.Component&lt;{ foo: string }, { onOk: string }&gt; {
        get fooUpper() {
            return this.$props.foo.toUpperCase();

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>;
        }
      });

      const w = mount(ExtendedComponent, {
        propsData: { foo: "foo", baz: "baz" }
      });
      expect(w.html()).toBe("<span>foobarbaz</span>");
    });
  });