导入 vue 打字稿类型定义

Question

我试图在我的主文件中引用 vue 的打字稿定义entry.ts。

这是位于 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());

编译此文件后，输出如下。顺便说一句，打字稿针对带有 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 之间操作文件）。如何告诉打字稿编译器删除类型定义（.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

当我试图弄清楚如何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。