How can I get Vue.js 2.0 typings for TypeScript working with Visual Studio?

Question

I'm trying to get Vue.js 2.0 typings working with TypeScript in Visual Studio. Previously, I had used these typings from DefinitelyTyped, but they are for Vue.js 1.0 and thus don't match up. However, they did work just fine and let me work with the Vue type.

I've since transitioned to using the typing files that come with Vue.js releases (here). I have included them in my project in my ~/Scripts/typings/vue folder, but my project does not understand them.

I've gathered that these typing files are meant to be used via import/export possibly? There are no other typing files I am using that work this way, so I am not sure how to correctly implement the typings such that they are available globally to my project.

I have a sample solution that shows an example of what I've tried - download here from my github repo.

Here's the structure of my Scripts folder:

_references.d.ts contents

/// <reference path="typings/vue/index.d.ts" /> 

vue_test.ts contents

namespace Test
{
    export class MyClass
    {
        public initialize()
        {
            var component = this.getComponent();
        }

        private getComponent(): Vue.Component
        {
            return Vue.component("test", {
                template: "<div></div>",
                props: ["test"],
                methods: {
                    onClick: () =>
                    {
                    }
                }
            });
        }
    }
}

What I would expect is that I would have access to the Vue.Component namespace and other namespaces that are declared in typings/vue/index.d.ts, but this does not seem to be the case.

I did attempt to import the exported class into global, like this:

import * as _Vue from "./index";

declare global
{
    export class Vue extends _Vue
    {

    }
}

However, this only allows me to access the root Vue class, and thus I cannot do things like specify Vue.Component as a type, or any other namespace beyond Vue.

Other information:
Visual Studio 2015
Vue.js version 2.2.1
TypeScript version 2.1

UPDATE after suggestions from @unional Here is my new folder structure:

No more _references.d.ts, using tsconfig.json instead. The tsconfig.json file contains this:

{
    "compilerOptions": {
        "sourceMap": true
    },
    "include": [
        "../../**/*.ts"
    ]
}

The above imports all .ts files in the project. The ~/Scripts/typings/custom-typings/vue.d.ts file contains the following:

export * from "vue"
export as namespace Vue

Visual Studio tells me Cannot find module 'vue', so my typings are still not functional, although the tsconfig.json file works (I added the jQuery typing to verify that).

Here is a link to the updated solution showing the new problems: [link]

Answer 1

With NPM

Drop down to the command line in your app's root directory to use NPM and the TypeScript command line interface.

• If you do not already have a package.json file, then first run npm init.
• Then to install vue.js, run npm install --save vue.
• To install its types run npm install --save-dev @types/vue.
• If you also lack a tsconfig.json file, then run tsc --init.
• At that point, you will be able to build by running tsc.

Without NPM

Not using NPM is unconventional and will require a lot of manual work. Here is one of those manual approaches.

Download VueJS 2.1.1 from the GitHub repo. After extracting the archive,

1. Put the contents of dist into Scripts/vuejs directory,
2. Put the contents of typings into typings/vuejs directory,
3. Add a tsconfig.json file to your project's root that his this content.

tsconfig.json

{
  "compilerOptions": {
    // ....... other properties omitted      
    "typeRoots": [
      "./typings/"
    ],
    "target": "es5",
    "lib": ["es2015", "dom", "es2015.promise" ]
  }
}

Then, at the top of the file that will be using Vue, add a relative import statement.

import * as Vue from "../typings/vuejs";

interface MyComponent extends Vue {
  message: string
  onClick (): void
}

export default {
    template: '<button @click="onClick">Click!</button>',
    data: function () {
        return {
            message: 'Hello!'
        }
    },
    methods: {
        onClick: function () {
            window.alert(this.message)
        }
    }
}

Example

Here is an updated version of your WebApplication1 example.

https://github.com/bigfont/StackOverflow/tree/master/TypeScriptVueJsTypes

See also:

https://vuejs.org/v2/guide/typescript.html

https://github.com/vuejs/vue

Answer 2

I was able to use information from @unional's comment, but with a slight change:

I added this to my custom-vue.d.ts file:

import * as _Vue from 'vue';
export as namespace Vue;
export = _Vue; 

Additionally, I had to create a package.json file with the following:

{
    "dependencies": {
        "vue": "^2.2.1"
    }
}

Finally, I needed to add a node_modules folder at the same scope as my tsconfig.json file. It has the following:

+-- node_modules
|   +-- vue
|   |   +-- package.json
|   |   +-- types
|   |   |   +-- index.d.ts
|   |   |   +-- options.d.ts
|   |   |   +-- plugin.d.ts
|   |   |   +-- vnode.d.ts
|   |   |   +-- vue.d.ts

package.json simple contains:

{
  "typings": "types/index.d.ts"
}

And things are now WORKING

Edit
Alternatively, I discovered I could avoid the whole node_modules thing by setting tsconfig.json's property for moduleResolution to Classic. After doing that, I changed my custom-vue.d.ts import to look like this:

import * as _Vue from "../vue/index";