wonderful-panda/vue-tsx-support

error for default object prop

iztsv opened this issue · 1 comments

iztsv commented

I've tried to use 3.0.0-preview.1 and get the following error:

No overload matches this call.
  Overload 1 of 2, '(options: FunctionalComponentOptions<unknown, RecordPropsDefinition<unknown>>, requiredProps?: never[] | undefined): VueConstructor<_TsxComponentInstanceV3<Vue, {}, {} & {}, {}, {}, {}>>', gave the following error.
    Argument of type '{ name: string; props: { prop: { type: () => Prop; default: () => {}; }; }; data(this: Readonly<{ prop: Prop; }> & Vue & { _tsx: DeclareProps<{} & { prop?: Prop | undefined; }>; }): { ...; }; render(): Element; }' is not assignable to parameter of type 'FunctionalComponentOptions<unknown, RecordPropsDefinition<unknown>>'.
      Object literal may only specify known properties, and 'data' does not exist in type 'FunctionalComponentOptions<unknown, RecordPropsDefinition<unknown>>'.
  Overload 2 of 2, '(options: object & ComponentOptions<Vue & { _tsx: DeclareProps<{ prop: Prop; } & { _tsx?: DeclareProps<{} & { prop?: Prop | undefined; }> | undefined; }>; }, ... 4 more ..., { ...; }> & ThisType<...> & { ...; }, requiredPropsNames?: "prop"[] | undefined): VueConstructor<...>', gave the following error.
    Property '_tsx' is missing in type '{ prop: { type: () => Prop; default: () => {}; }; }' but required in type 'RecordPropsDefinition<{ prop: Prop; _tsx: DeclareProps<{} & { prop?: Prop | undefined; }>; }>'.ts(2769)
api.d.ts(86, 9): '_tsx' is declared here.
options.d.ts(75, 3): The expected type comes from property 'props' which is declared here on type 'object & ComponentOptions<Vue & { _tsx: DeclareProps<{ prop: Prop; } & { _tsx?: DeclareProps<{} & { prop?: Prop | undefined; }> | undefined; }>; }, ... 4 more ..., { ...; }> & ThisType<...> & { ...; }'

for the component:

import { component } from 'vue-tsx-support';

type Prop = { p?: number };

export default component({
  name: 'MyComponent',
  props: {
    prop: {
      type: Object as () => Prop,
      default: function () {
        return {};
      }
    }
  },
  data() {
    return {
      text: 'text'
    };
  },
  render() {
    return <div>{this.text}</div>;
  }
});

The error does not occur for 2.3.3.

It seems props type is not infered correctly.

try this

export default component({
  name: 'MyComponent',
  props: {
    prop: {
      type: Object as () => Prop,
      default: function (): Prop {  /// <-- ADD return type
        return {};
      }
    }
  },
  /* ... */
});