In my main file entry.ts, I am trying to make reference to the typescript definitions for Vue.
The 'entry.ts' file is located at src/js/entry.ts, while the type definition for Vue can be found 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());
Upon compilation of this file with TypeScript targeting es6 and es6 modules, the following output is generated:
[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'.
To address this issue, I replaced the reference to the Vue type definition with an import statement as shown below:
/// <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());
The updated code compiles successfully without errors. Here is 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());
However, a problem arises where the import statement for the type definition remains, causing issues when using Rollup with Babel. How can I instruct the TypeScript compiler to eliminate imports for type definitions (.d.ts files)?
Below is 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";
// Namespace containing various available types
declare namespace Vue {
// Types exported via this namespace
}
// Class declaration for Vue class
declare class Vue extends V.Vue {}
export = Vue;
Your assistance on this matter would be greatly appreciated. Thank you.