Question

在package.json我有

"devDependencies": {    
   "vue": "2.5.16"
}

在index.d.ts, vue.d.ts中为我提供了node_modules\vue\types和so on。起初我遇到的问题是，在执行类似(TS) Cannot find name 'Vue'的操作时未找到vue（new Vue({...});）。在阅读this线程后，我通过添加custom.d.ts文件来修复它：

import _vue = require('vue');

declare global {
    const Vue: typeof _vue;
}

并使用/// <reference path="../Declarations/custom.d.ts" />

引用它

显然原因是vue的声明采用外部模块格式（使用export），如果没有使用模块系统，则需要全局模块。

但是现在IntelliSense给了我："(TS) Cannot use 'new' with an expression whose type lacks a call or construct signature."并且构建失败。

我使用带有outFile的TypeScript 2.8且没有模块（仅reference xml评论）。

编辑：我以为我找到了答案

const Vue: typeof _vue.default;

使new Vue()语句的错误消失。但是，当我尝试声明Vue类型的变量时，我再次收到Cannot find name 'Vue'错误：

var app = new Vue({}); // Works
var app2:Vue = new Vue({}); // Doesn't work

Answer 1

我使用custom.d.ts内的以下内容运行了基础知识：

import * as _vueIndex from "vue";
import * as _vue from "vue/types/vue";

declare global {
    const Vue: _vueIndex.VueConstructor; // related to vue.d.ts "export const Vue: VueConstructor;"

    namespace Vue {
        //type Vue = typeof _vueIndex.default; // For some reason this becomes VueConstructor interface instead of Vue interface
        type Vue = _vue.Vue;
        type CreateElement = _vueIndex.CreateElement;
        type CombinedVueInstance<Instance extends Vue, Data, Methods, Computed, Props> = _vue.CombinedVueInstance<Instance, Data, Methods, Computed, Props>;
        /*Other interfaces*/
    }
}

现在可以做类似的事情：

var app: Vue.CombinedVueInstance<Vue.Vue, any, VmMethods, any, any> = new Vue({
    el: '#app',
    methods: new VmMethods()
});

console.log(app.toggleSidebar()); // toggleSidebar is a public function in VmMethods
console.log(app.nonExisting()); // ReSharper gives correct cannot resolve error but TypeScript still transpiles for some reason, which gives a run time error

ReSharper仍然提供Symbol Vue cannot be properly resolved, probably it is located in inaccessible module，但TypeScript转换并运行良好。

如何将TypeScript与vue一起使用而不使用模块

1 个答案: