typescript - 导入 vue typescript 类型定义

Question

我正在尝试在我的主文件 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());

当这个文件被编译时，输出如下。顺便说一句，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());

问题是没有删除类型定义的导入语句。这会导致稍后当我将 rollup 与 babel 一起使用时出错(我不使用 ts 的 rollup 插件，因为我需要在 rollup 和 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;

感谢任何帮助，谢谢。

Answer 1

我在尝试弄清楚如何从我的 typescript 代码中导入 VNode 时偶然发现了这个问题。

也许我的回答会对遇到同样问题的人有所帮助。

类型定义在 vue/types 中提供。从那里导入所需的接口(interface)或类。

以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。