How to use TypeScript with vue and no modules

Question

In package.json I have

"devDependencies": {    
   "vue": "2.5.16"
}

which gives me index.d.ts, vue.d.ts and so on in node_modules\vue\types. At first I had the problem that vue was not found ((TS) Cannot find name 'Vue') when doing something like new Vue({...});. After reading this thread I fixed it with adding a custom.d.ts file:

import _vue = require('vue');

declare global {
    const Vue: typeof _vue;
}

And referencing it with /// <reference path="../Declarations/custom.d.ts" />

Apparently the reason is that vue's declaration are in external module format (using export) and global module is needed if no module system is used.

But now IntelliSense gives me: "(TS) Cannot use 'new' with an expression whose type lacks a call or construct signature." and the build fails.

I'm using TypeScript 2.8 with outFile and no modules (just reference xml comments).

Edit: I thought I found the answer by using

const Vue: typeof _vue.default;

which makes the errors for the new Vue() statement go away. But when I try to declare a variable of type Vue I get the Cannot find name 'Vue' error again:

var app = new Vue({}); // Works
var app2:Vue = new Vue({}); // Doesn't work

user764754 · Accepted Answer · 2018-05-04 15:07:02Z

I got the basics running with the following inside custom.d.ts:

import * as _vueIndex from "vue";
import * as _vue from "vue/types/vue";

declare global {
    const Vue: _vueIndex.VueConstructor; // related to vue.d.ts "export const Vue: VueConstructor;"

    namespace Vue {
        //type Vue = typeof _vueIndex.default; // For some reason this becomes VueConstructor interface instead of Vue interface
        type Vue = _vue.Vue;
        type CreateElement = _vueIndex.CreateElement;
        type CombinedVueInstance<Instance extends Vue, Data, Methods, Computed, Props> = _vue.CombinedVueInstance<Instance, Data, Methods, Computed, Props>;
        /*Other interfaces*/
    }
}

Now it's possible to do something like:

var app: Vue.CombinedVueInstance<Vue.Vue, any, VmMethods, any, any> = new Vue({
    el: '#app',
    methods: new VmMethods()
});

console.log(app.toggleSidebar()); // toggleSidebar is a public function in VmMethods
console.log(app.nonExisting()); // ReSharper gives correct cannot resolve error but TypeScript still transpiles for some reason, which gives a run time error

ReSharper still gives Symbol Vue cannot be properly resolved, probably it is located in inaccessible module but TypeScript transpiles and runs fine.

Collectives™ on Stack Overflow

How to use TypeScript with vue and no modules

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related