createComponent in TypeScript not inherit from Vue ComponentOptions about composition-api HOT 11 CLOSED

If you use as assignment wrapping the code in createComponent does nothing.
If you want to use createComponent you have to extend the interface used by the function as an argument.

import { ComponentOptions } from 'vue-function-api/dist/ts-api/component'

declare module 'vue-function-api/dist/ts-api/component' {
  interface ComponentOptions {
    myOption?: string
  }
}

i have update version of @PatrykWalach :

import { ComponentOptions } from 'vue-function-api/dist/ts-api/component';
import Vue, { ComponentOptions as VueComponentOptions } from 'vue';

declare module 'vue-function-api/dist/ts-api/component' {
  interface ComponentOptions extends VueComponentOptions<Vue> {}
}

like this we will have all properties typesafe from vue constructor 2.x. and still allow Infer prop parameter of setup.

in case you dont want input all properties, can do:

import { ComponentOptions } from 'vue-function-api/dist/ts-api/component';
import Vue, { ComponentOptions as VueComponentOptions } from 'vue';

declare module 'vue-function-api/dist/ts-api/component' {
  interface ComponentOptions extends Pick<VueComponentOptions<Vue>, 'name' | 'components' |....> {
  }
}

from composition-api.

If you use as assignment wrapping the code in createComponent does nothing.
If you want to use createComponent you have to extend the interface used by the function as an argument.

import { ComponentOptions } from 'vue-function-api/dist/ts-api/component'

declare module 'vue-function-api/dist/ts-api/component' {
  interface ComponentOptions {
    myOption?: string
  }
}

from composition-api.

ps: After more research out package, i found that in index.d.ts file we had modify Vue Component Options really;

vue-function-api/dist/index.d.ts:

import Vue, { VueConstructor } from 'vue';
import { SetupFunction, SetupContext } from './ts-api';
import { Wrapper } from './wrappers';
declare module 'vue/types/options' {
    interface ComponentOptions<V extends Vue> {
        setup?: SetupFunction<{}, {}>;
    }
}
....

I dont know why we had define setup function into Vue Component Options but not use it when define createComponent function, but use custom interface which lack of inherit from Vue. But from this point i had work around for component:

shims-vue.d.ts

// ComponentOptions is declared in types/options.d.ts
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    myOption?: string;
  }
}

import Vue, { ComponentOptions } from 'vue';
import { createComponent } from 'vue-function-api';
import { ComponentPropsOptions } from 'vue-function-api/dist/ts-api/componentProps';

export default createComponent({
  setup(props, context) {
    return {};
  },
  myOption: 'yes it work'
} as ComponentOptions<Vue>);

Hope this will help we fix issue faster. Thank again for your good stuff before new age of Vue 3 💃

from composition-api.

import SignIn from './views/SignIn.vue';

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/sign-in',
      name: 'SignIn',
      component: SignIn,   // use createComponent
    },
  ],
});

from composition-api.

It seems that not being an instance of Vue anymore, but a VueProxy instead, this change broke most testing methods (eg. shallowMount(), mount()) as they cannot infer wrapper.vm type.
This results into either a TS error when mounting or the vm type to be never, making it useless.

If the component doesn't have a props property, its instance will be wrongly inferred as a FunctionalComponent and TypeScript will fire off an error asking for the missing functional property.

from composition-api.

Shouldn't it be

import Vue, { ComponentOptions as VueComponentOptions } from 'vue';
declare module 'vue-function-api/dist/ts-api/component' {
  interface ComponentOptions
    extends Exclude<VueComponentOptions<Vue>, 'props'> {}
}

?

Otherwise you're overwriting props typings with their v2 counterparts.

from composition-api.

@IlCallo hm... this depend on how many property you need ship from vue 2.x into vue-function-api typechecking. Actually i not need all of them , only need name, components to make Vue2.x system work.

from composition-api.

Yeah, I'm talking about the first mode you used, which adds everything.
Even doing as I did (leaving off props from original type) rises a warning in TS I actually don't understand.

Interface 'ComponentOptions<PropsOptions, RawBindings, Props>' incorrectly extends interface 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
  Types of property 'props' are incompatible.
    Type 'PropsOptions | undefined' is not assignable to type 'string[] | RecordPropsDefinition<Record<string, any>> | undefined'.
      Type 'PropsOptions' is not assignable to type 'string[] | RecordPropsDefinition<Record<string, any>> | undefined'.
        Type 'PropsOptions' is not assignable to type 'string[]'.

Also, import { ComponentOptions } from 'vue-function-api/dist/ts-api/component'; doesn't appear to do anything, what's that import for?

from composition-api.

@IlCallo i see, you right my first trick will raise issue with typechecking, in this case my only way i think good is manual transfer properties from Vue 2.x we really need into Vue3.x type:

import { ComponentOptions } from 'vue-function-api/dist/ts-api/component';
import Vue, { ComponentOptions as VueComponentOptions } from 'vue';

declare module 'vue-function-api/dist/ts-api/component' {
  type d = VueComponentOptions<Vue>;

  interface ComponentOptions {
    name?: d['name'];
    components?: d['components'];
    methods?: d['methods'];
  }
}

This is my d.ts file , i only need methods , components, name for basic vue component.

also about question what the import api component line doing: I think it is for reference to ComponentOptions of vue-function-api, no ?

this is file d.ts to extend ComponentOptions of vue , i pick from Vue TS document and Nuxt project:

import Vue, { ComponentOptions } from 'vue';
import { VeeValidateComponentOptions } from 'vee-validate';

declare module 'vue/types/vue' {
  // Global properties can be declared
  // on the `VueConstructor` interface
  interface VueConstructor {}
}

// ComponentOptions is declared in types/options.d.ts
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    $_veeValidate?: VeeValidateComponentOptions;
  }
}

my project i store both 2 d.ts file, one for extend for custom option, buefy type etc etc into v2.x Vue ComponentOptions, like normal, and second file is extends what property i want into vue-function-api's ComponentOptions . with my last suggest trick above i nolonger meet typechecking fails anymore. can you try .

from composition-api.

also about question what the import api component line doing: I think it is for reference to ComponentOptions of vue-function-api, no ?

You actually don't need it. You are defining in the vue-function-api namespace a new interface with the same name of the old one and they are merged because of TypeScript interface merging capabilities. Importing it won't do anything because you are not actually referencing it.

with my last suggest trick above i nolonger meet typechecking fails anymore. can you try .

Will check it next week, tomorrow I go on vacation :P
I already solved using your second way of just selecting the needed properties, anyway. I needed just name and components too.

from composition-api.

vue-router error.

import SignIn from './views/SignIn.vue';

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/sign-in',
      name: 'SignIn',
      component: SignIn,   // use createComponent
    },
  ],
});

Actually the fix to this is pretty simple, just they haven't add it to the VueCLI, you need to add a type into the Route Array, you can check this:
vuejs/vue-cli#4805

from composition-api.