Typescript definitions not working?

[clementdevos]

Hey guys!

I'm currently trying to upgrade our project running vue 2.3x to vue 2.5.13 and i can't make it use VueRessource.

My vue imports and use are declared this way

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import Vue2Filters from 'vue2-filters';
import { Validator } from 'vee-validate';
import BootstrapVue from "bootstrap-vue";
import VueI18n from 'vue-i18n';


Vue.use(Vue2Filters);
Vue.use(VueResource);
Vue.use(VueRouter);
Vue.use(VueI18n);
Vue.use(infiniteScroll);
Vue.use(BootstrapVue);

But the TS compilation fails with the following error :

(61,9): error TS2345: Argument of type 'typeof "/home/clement/workspace/pingflow/v3/fry/node_modules/vue-resource/types/index"' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
  Type 'typeof "/home/clement/workspace/pingflow/v3/fry/node_modules/vue-resource/types/index"' is not assignable to type 'PluginFunction<any>'.
    Type 'typeof "/home/clement/workspace/pingflow/v3/fry/node_modules/vue-resource/types/index"' provides no match for the signature '(Vue: VueConstructor<Vue>, options?: any): void'.

I'm running the latest libraries versions : vue@2.5.13 and vue-resource@1.3.6 (double checked in the node_modules)
If it's of any help, i'm using yarn.

Cheers,

Clément

[prasadrajandran]

Hey,

Not sure why this isn't getting more attention, but downgrading to v1.3.5 worked for me. They added TypeScript typings to v1.3.6+ (see commit), so I'm guessing there's something not quite right with the typings?

[clementdevos]

I ended up doing the same thing...

[huysamen]

Same issue here.

[krishghata]

Hi I am still getting this error :

Console:

Argument of type 'typeof "D:/Workshop/nodejs/ef-web-components/node_modules/vue-resource/types/index"' is not assig
nable to parameter of type 'PluginObject | PluginFunction'.
Type 'typeof "D:/Workshop/nodejs/ef-web-components/node_modules/vue-resource/types/index"' is not assignable to type 'Pl
uginFunction'.
Type 'typeof "D:/Workshop/nodejs/ef-web-components/node_modules/vue-resource/types/index"' provides no match for the s
ignature '(Vue: VueConstructor, options?: any): void'.
178 |
179 | import VueResource from 'vue-resource';

180 | Vue.use(VueResource);

Component:

import VueResource from 'vue-resource';
Vue.use(VueResource);

package.json

{
"name" : "ef-web-components",
"version" : "0.1.0",
"private" : true,
"scripts" : {
"serve" : "vue-cli-service serve",
"build" : "vue-cli-service build",
"lint" : "vue-cli-service lint"
},
"dependencies" : {
"bootstrap" : "^4.0.0",
"jquery" : "^3.3.1",
"luxon" : "^1.0.0",
"moment" : "^2.22.0",
"popper.js" : "^1.14.1",
"vue" : "^2.5.13",
"vue-class-component" : "^6.0.0",
"vue-click-outside" : "^1.0.7",
"vue-datetime" : "^1.0.0-beta.3",
"vue-property-decorator" : "^6.0.0",
"vue-resource" : "^1.5.0",
"weekstart" : "^1.0.0"
},
"devDependencies" : {
"@types/node" : "^9.6.2",
"@vue/cli-plugin-babel" : "^3.0.0-beta.6",
"@vue/cli-plugin-typescript" : "^3.0.0-beta.6",
"@vue/cli-service" : "^3.0.0-beta.6",
"node-sass" : "^4.7.2",
"sass-loader" : "^6.0.6",
"vue-template-compiler" : "^2.5.13"
},
"browserslist" : [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

[NateScarlet]

@krishghata Fixed in 1.5.1, you are using 1.5.0, you can manully copy the files in https://github.com/pagekit/vue-resource/tree/develop/types or use my fork by: npm install https://github.com/NateScarlet/vue-resource/tarball/1.5.1

[jsundquist]

When will this be officially released so we don't need the above tarball link from @NateScarlet ? Would much prefer to do an npm install vue-resource@1.5.1 instead.

[csr632]

Using 1.5.1, still can't access $http or http in Vue.

I have import and use vue-resource in main.ts:

according to vue docs , someone have to do something like:

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

But vue-resource is not doing something like this, which make $http not accessable from global Vue.

[csr632]

As a temporary workaround, I manually add some declaration to projectRoot/node_modules/vue-resource/types/vue.d.ts:

/**
 * Extends interfaces in Vue.js
 */

import Vue from "vue";
import { HttpHeaders, HttpOptions, HttpResponse, $http, $resource } from "./vue_resource";

declare module "vue/types/options" {
    interface ComponentOptions<V extends Vue> {
        http?: (HttpOptions & { headers?: HttpHeaders } & { [key: string]: any })
    }
}

declare module "vue/types/vue" {
    interface Vue {
        $http: {
            (options: HttpOptions): PromiseLike<HttpResponse>;
            get: $http;
            post: $http;
            put: $http;
            patch: $http;
            delete: $http;
            jsonp: $http;
        };
        $resource: $resource;
    }

    interface VueConstructor {
        http: {
            (options: HttpOptions): PromiseLike<HttpResponse>;
            get: $http;
            post: $http;
            put: $http;
            patch: $http;
            delete: $http;
            jsonp: $http;
        };
        resource: $resource;
    }
}

[gspinella]

I've made a workarond by casting Vue to 'any' like this:

(<any>Vue).http.options.root = "...";

This removed the error message from TS compiler.

[VasiliyLazarev-IBM]

Same problem:

typescript@3.2.1
vue@2.5.17
vue-svgicon@3.2.2