Referencing the type definitions for Vue.js in TypeScript

Question

I am trying to get type checking in my Vue.js code (v2.2.1). As a start I just want this one line to compile with TypeScript (i.e., I want the Vue class to be recognized):

var app = new Vue();

This compiles if I import Vue with:

import * as Vue from 'vue';

However, it generates a require() call:

var Vue = require("vue");

I do not use modules, I simply reference the Vue library from a CDN before my script.

I tried referencing the definition file as so:

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

But the Vue class is not recognized (presumably because it is exported in the definition file and hence should be imported?).

Can I use import to only reference the type definitions without 'requiring' the the library?

Answer 1

You can write your own definition file (e.g. vue-global.d.ts) where Vue will be defined in global namespace:

import _vue = require('vue');

declare global{
    const Vue: typeof _vue;
}

Don't forget to include this definition in tsconfig