strictFunctionTypes

[ThinkChaos]

I wanted to enable strict in my tsconfig.json, but the option strictFunctionTypes option leads to errors in my components.
If the component is empty, it works fine, but as soon as I add any kind of attributes/methods, the compiler complains.

I'm quite familiar with TypeScript yet, so I'm not sure if I'm doing something wrong, if strict is not supported, or if it's just not possible.

Here's a basic component that exhibits the issue:

@Component
export default class Hello extends Vue {
  @Prop()
  test: boolean
}

Here's what the errors look like:

 error  in [...]/src/components/Hello.vue.ts

[tsl] ERROR in [...]/src/components/Hello.vue.ts(24,2)
      TS2345: Argument of type 'typeof Hello' is not assignable to parameter of type 'VueClass<Vue>'.
  Type 'typeof Hello' is not assignable to type 'new (...args: any[]) => Vue'.
    Type 'Hello' is not assignable to type 'Vue'.
      Types of property '$options' are incompatible.
        Type 'ComponentOptions<Hello, DefaultData<Hello>, DefaultMethods<Hello>, DefaultComputed, PropsDefiniti...' is not assignable to type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
          Type 'Hello' is not assignable to type 'Vue'.

 error  in ./src/router/index.ts

[tsl] ERROR in [...]/src/router/index.ts(8,27)
      TS2345: Argument of type '{ mode: "history"; routes: { path: string; name: string; component: typeof Hello; }[]; }' is not assignable to parameter of type 'RouterOptions | undefined'.
  Type '{ mode: "history"; routes: { path: string; name: string; component: typeof Hello; }[]; }' is not assignable to type 'RouterOptions'.
    Types of property 'routes' are incompatible.
      Type '{ path: string; name: string; component: typeof Hello; }[]' is not assignable to type 'RouteConfig[] | undefined'.
        Type '{ path: string; name: string; component: typeof Hello; }[]' is not assignable to type 'RouteConfig[]'.
          Type '{ path: string; name: string; component: typeof Hello; }' is not assignable to type 'RouteConfig'.
            Types of property 'component' are incompatible.
              Type 'typeof Hello' is not assignable to type 'VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultCompute...'.
                Type 'typeof Hello' is not assignable to type 'AsyncComponent<DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, Record<string, any>>'.
                  Type 'typeof Hello' provides no match for the signature '(resolve: (component: Component<DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, Record<string, any>>) => void, reject: (reason?: any) => void): void | Promise<VueConstructor<Vue> | FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>> | ThisTypedComponentOptionsWithArrayProps<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, string> | ThisTypedComponentOptionsWithRecordProps<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, Record<string, any>> | EsModuleComponent>'.

Can you shed some light on this for me?

[kaorun343]

@ThinkChaos

Which version of vue-class-component are installed?
The latest version of it will work well, I think.

vuejs/vue-class-component#181

[ThinkChaos]

You're right, that was the issue. I update from Vue 2.5.2 to 2.5.3, and it works now!