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]

My answer here is probably what you are looking for: stackoverflow.com/questions/42234096/… — unional
– unional, Commented Mar 9, 2017 at 20:07
@unional I can't seem to get your suggestion working. I don't have a tsconfig.json file. Maybe you could demo it with my sample solution I linked in my post? — Jake
– Jake, Commented Mar 10, 2017 at 6:34
Probably worth create one. Using /// <reference is very tedious in the long run. Just create it in the root of your project. — unional
– unional, Commented Mar 10, 2017 at 6:36
I see. Looked at your project and it is C# with some TS. Haven't work on VS and C# for quite a while so I am not sure how VS configure things. Maybe this would work? github.com/Microsoft/TypeScript/issues/… — unional
– unional, Commented Mar 10, 2017 at 6:43

tony19 · Accepted Answer · 2022-07-15 05:46:14Z

10

+400

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,

Put the contents of dist into Scripts/vuejs directory,
Put the contents of typings into typings/vuejs directory,
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

14 Comments

Jake Over a year ago

We do not use npm in our projects, so this is unfortunately not a solution for me

Shaun Luttin Over a year ago

@jake Wow. I'm so sorry.

Shaun Luttin Over a year ago

@Jake You do actually use NPM: github.com/BaseballTheater/BaseballTheater/blob/master/…

Jake Over a year ago

Ah yes, sorry - I DO in the project you've linked, but not in all the projects for which I need to solve this problem. :(

PandaWood Over a year ago

This answer is not correct. The "types" that are installed by npm are a "stub" and you get a warning:"@types/[email protected]: This is a stub types definition for vuejs (github.com/vuejs/vue). vuejs provides its own type definitions, so you don't need @types/vue installed!"

|

Jake · Accepted Answer · 2017-03-13 18:31:07Z

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";

edited Mar 13, 2017 at 18:31

answered Mar 12, 2017 at 17:02

Jake

4,26410 gold badges38 silver badges60 bronze badges

2 Comments

Shaun Luttin Over a year ago

Nice work. It occurred to me that you could use NPM locally and then add its output and installs to version control. That is close to what you have done manually. Also, to understand what is happening with node_modules, you can read the write-up on module resolution here: typescriptlang.org/docs/handbook/module-resolution.html

Jake Over a year ago

@ShaunLuttin Yes, that is interesting. I have actually re-modified things again to avoid the node_modules stuff by using Classic module resolution. I edited my answer to reflect that.

Aravind · Accepted Answer · 2017-03-11 19:23:43Z

1

Since the error is at compile time, No big problem in it. you can use this plugin to for faster development from here

Also, the code should be as

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates the class is a Vue component
@Component({

  template: ''
})
export default class MyComponent extends Vue {



}

and so on. You can still use the vuejs inside your cshtml files.

answered Mar 11, 2017 at 19:23

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

With NPM

Without NPM

Example

See also:

14 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

With NPM

Without NPM

Example

See also:

14 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related