CODEWITHSUNDEEP
typescriptvue.js
Xavier Poinas
Xavier Poinas

Reputation: 19743

Referencing the type definitions for Vue.js in TypeScript

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?

Upvotes: 4

Views: 6036

Answers (2)

sNICkerssss
sNICkerssss

Reputation: 6430

If you are using libs from official documentation. Download all files. In your typescript file add reference:

/// <reference path="../path_to../app/TypeScript/_definitely_typed/Vue/2.6.10/index.d.ts" />

Just change file vue.d.ts.

Comment line:

export const Vue: VueConstructor;

Add after:

declare global{
    const Vue: VueConstructor;
}

Upvotes: 0

Aleksey L.
Aleksey L.

Reputation: 38046

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

Upvotes: 7

Related Questions