Jake Jake - 9 months ago 193
TypeScript Question

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

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:

enter image description here

_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:
enter image description here

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 Source

With NPM

I recommend dropping down to the command line in your app's root directory and using 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, particularly because you will not have a package.json file to support the tooling. If you are not able to use NPM, though, here is a valid approach that requires manually installation and setup.

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

  1. Put the contents of the dist into your Scripts/vuejs directory,
  2. Put the contents of the typings into your 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" ]
  }
}

Then, at the top of your file that uses 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)
        }
    }
}

See also: