我正在尝试在主文件entry.ts
中引用vue的typescript定义。
这是位于src / js / entry,ts的'entry.ts', vue的类型定义位于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());
编译此文件时,输出如下。 BTW打字稿用es6模块定位es6。
[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'.
JQuery工作得很好(看起来像),所以我用导入替换了对vue类型定义的引用。
/// <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());
它编译得很好,这是输出:
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());
问题是不删除类型定义的import语句。当我使用汇总与babel时,这会导致错误(我不使用汇总插件来处理ts,因为我需要在汇总和ts之间操作文件)。如何告诉typescript编译器删除类型定义的导入(.d.ts文件)?
这是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;
感谢任何帮助,谢谢。
答案 0 :(得分:0)
当试图找出如何从打字稿代码中导入VNode
时,我偶然发现了这个问题。
也许我的回答会帮助遇到同样问题的人。
在vue/types
中提供了类型定义。从那里导入所需的接口或类。
以VNode
为例:
// 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版本:2.6.10。