导入vue类型脚本类型定义

Question

我试图在我的主文件条目中引用vue的typescript定义。ts。

entry.ts位于src/js/entry， ts，vue的类型定义位于src/js/lib/baul/vue/type/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());

编译此文件时，输出如下。顺便说一句，typescript的目标是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中使用rollup时，这会导致一个错误（我不为ts使用rollup插件，因为我需要操作rollup和ts之间的文件）。如何告诉typescript编译器删除类型定义（.d.ts文件）的导入？

这是vue的类型定义（src/jslb/baul/vue/type/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;

感谢您的帮助。

Answer 1

当我试图弄清楚如何从我的打字脚本代码中导入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。