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());

编译此文件时，输出如下。 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;

感谢任何帮助，谢谢。

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。

导入vue打字稿类型定义

1 个答案: