Importing vue typescript type definitions

Question

I am trying to reference the typescript definitions for vue in my main file entry.ts.

Here is 'entry.ts' located at src/js/entry,ts, the type definition for vue is located at src/js/lib/bower/vue/types/index.d.ts

/// <reference path='./lib/typings/jquery.d.ts' />
/// <reference path='./lib/bower/vue/types/index.d.ts' />

let data: Object = {},
    app: Vue = new Vue({
        data: data,
        el: '#app'
    });
console.log(app);

class Test {
    private id: string;
    constructor(id: string) {
        this.id = id;
    }
    public getElement(): any {
        return $(this.id);
    }
}
console.log(new Test('asdf').getElement());

When this file gets compiled, the output is as follows. BTW typescript is targeting es6 with es6 modules.

[steventheevil@Steven-PC webdev-starter]$ tsc
src/js/entry.ts(5,10): error TS2304: Cannot find name 'Vue'.
src/js/entry.ts(5,20): error TS2304: Cannot find name 'Vue'.

The JQuery works fine (it looks like), so I replace the reference to the vue type definition with an import.

/// <reference path='./lib/typings/jquery.d.ts' />
import * as Vue from './lib/bower/vue/types/index';

let data: Object = {},
    app: Vue = new Vue({
        data: data,
        el: '#app'
    });
console.log(app);

class Test {
    private id: string;
    constructor(id: string) {
        this.id = id;
    }
    public getElement(): any {
        return $(this.id);
    }
}
console.log(new Test('asdf').getElement());

It compiles fine, here's the output:

import * as Vue from '../../src/js/lib/bower/vue/types/index';
let data = {}, app = new Vue({
    data: data,
    el: '#app'
});
console.log(app);
class Test {
    constructor(id) {
        this.id = id;
    }
    getElement() {
        return $(this.id);
    }
}
console.log(new Test('asdf').getElement());

The problem is that the import statement for the type definition is not removed. This causes an error later when I use rollup with babel (I don't use the rollup plugin for ts because I need to manipulate the files between rollup and ts). How do I tell the typescript compiler to remove imports for type definitions (.d.ts files)?

Here's the type definition for vue (src/jslib/bower/vue/types/index.d.ts)

import * as V from "./vue";
import * as Options from "./options";
import * as Plugin from "./plugin";
import * as VNode from "./vnode";

// `Vue` in `export = Vue` must be a namespace
// All available types are exported via this namespace
declare namespace Vue {
  export type CreateElement = V.CreateElement;

  export type Component = Options.Component;
  export type AsyncComponent = Options.AsyncComponent;
  export type ComponentOptions<V extends Vue> = Options.ComponentOptions<V>;
  export type FunctionalComponentOptions = Options.FunctionalComponentOptions;
  export type RenderContext = Options.RenderContext;
  export type PropOptions = Options.PropOptions;
  export type ComputedOptions<V extends Vue> = Options.ComputedOptions<V>;
  export type WatchHandler<V extends Vue> = Options.WatchHandler<V>;
  export type WatchOptions = Options.WatchOptions;
  export type DirectiveFunction = Options.DirectiveFunction;
  export type DirectiveOptions = Options.DirectiveOptions;

  export type PluginFunction<T> = Plugin.PluginFunction<T>;
  export type PluginObject<T> = Plugin.PluginObject<T>;

  export type VNodeChildren = VNode.VNodeChildren;
  export type VNodeChildrenArrayContents = VNode.VNodeChildrenArrayContents;
  export type VNode = VNode.VNode;
  export type VNodeComponentOptions = VNode.VNodeComponentOptions;
  export type VNodeData = VNode.VNodeData;
  export type VNodeDirective = VNode.VNodeDirective;
}

// TS cannot merge imported class with namespace, declare a subclass to bypass
declare class Vue extends V.Vue {}

export = Vue;

Any help is appreciated, thank you.

@Aniruddha Das Yes, I've looked at npmjs.com/~types, but I'm not using npm for managing web dependencies, I'm using bower. — StevenDoesStuffs
– StevenDoesStuffs, Commented Nov 26, 2016 at 13:52
@Aniruddha Das I've also looked at github.com/typings/typings, but it doesn't have type definitions for vue (at least not 2.0). — StevenDoesStuffs
– StevenDoesStuffs, Commented Nov 26, 2016 at 15:16
@Aniruddha Das update: I'm using typings now with the vue types installed via bower, but it still gives me the same error (I'm using reference). — StevenDoesStuffs
– StevenDoesStuffs, Commented Nov 26, 2016 at 15:46
@Aniruddha Actually, I got it to work after reading the docs a few times. Thank you so much!!!! — StevenDoesStuffs
– StevenDoesStuffs, Commented Nov 27, 2016 at 2:09

HelloWorld101 · Accepted Answer · 2019-04-15 13:09:12Z

4

I stumbled upon this question when trying to figure out how to import VNode from my typescript code.

Perhaps my answer would help someone facing the same issue.

The type definitions are provided at vue/types. Import the required interfaces or classes from there.

Using VNode as example:

// main.ts
import Vue from 'vue';
import { VNode } from 'vue/types';
import App from './App.vue';

new Vue({
  render: (h): VNode => h(App),
}).$mount('#app');

Vue version used: 2.6.10.

answered Apr 15, 2019 at 13:09

HelloWorld101

4,5063 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Importing vue typescript type definitions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related