如何在 vue 和没有模块的情况下使用 TypeScript [英] How to use TypeScript with vue and no modules

问题描述

在 package.json 我有

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

这给了我 index.d.ts、vue.d.ts 和 node_modules\vue\types 中的 rel="nofollow noreferrer">等等.起初，我在执行类似 new Vue({...}); 之类的操作时遇到了找不到 vue 的问题((TS) Cannot find name 'Vue').阅读完 this 线程我通过添加一个 custom.d.ts 文件修复了它:

which gives me index.d.ts, vue.d.ts and so on in node_modules\vue\types. At first I had the problem that vue was not found ((TS) Cannot find name 'Vue') when doing something like new Vue({...});. After reading this thread I fixed it with adding a custom.d.ts file:

import _vue = require('vue');

declare global {
    const Vue: typeof _vue;
}

并使用 ///

显然是因为 vue 的声明是外部模块格式(使用export)，如果没有使用模块系统，则需要全局模块.

Apparently the reason is that vue's declaration are in external module format (using export) and global module is needed if no module system is used.

但现在 IntelliSense 给了我:"(TS) 不能将 'new' 用于类型缺少调用或构造签名的表达式." 并且构建失败.

But now IntelliSense gives me: "(TS) Cannot use 'new' with an expression whose type lacks a call or construct signature." and the build fails.

我使用的是带有 outFile 的 TypeScript 2.8，没有模块(只有 reference xml 注释).

I'm using TypeScript 2.8 with outFile and no modules (just reference xml comments).

我以为我通过使用找到了答案

I thought I found the answer by using

const Vue: typeof _vue.default;

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

which makes the errors for the new Vue() statement go away. But when I try to declare a variable of type Vue I get the Cannot find name 'Vue' error again:

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

推荐答案

我在 custom.d.ts 中使用以下内容运行了基础知识:

I got the basics running with the following inside 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*/
    }
}

现在可以执行以下操作:

Now it's possible to do something like:

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 无法正确解析，可能它位于无法访问的模块，但 TypeScript 可以转换并运行良好.

ReSharper still gives Symbol Vue cannot be properly resolved, probably it is located in inaccessible module but TypeScript transpiles and runs fine.

这篇关于如何在 vue 和没有模块的情况下使用 TypeScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！