如何获得 Vue.js 2.0 类型的 TypeScript 与 Visual Studio 一起使用？

Posted 2023-02-22

【中文标题】如何获得 Vue.js 2.0 类型的 TypeScript 与 Visual Studio 一起使用？

【英文标题】：How can I get Vue.js 2.0 typings for TypeScript working with Visual Studio?

【发布时间】：2017-07-28 01:35:24

【问题描述】：

我正在尝试让 Vue.js 2.0 类型与 Visual Studio 中的 TypeScript 一起工作。以前，我使用了来自definitelyTyped 的these typings，但它们适用于Vue.js 1.0，因此不匹配。但是，它们确实工作得很好，让我使用 Vue 类型。

我已经过渡到使用 Vue.js 版本 (here) 附带的打字文件。我已将它们包含在我的 ~/Scripts/typings/vue 文件夹中的项目中，但我的项目不理解它们。

我收集到这些打字文件可能是通过导入/导出来使用的？我没有使用其他类型的文件以这种方式工作，所以我不确定如何正确实现类型，以便它们在我的项目中全局可用。

我有一个示例解决方案，其中显示了我尝试过的示例 - download here from my github repo。

这是我的Scripts 文件夹的结构：

_references.d.ts 内容

/// <reference path="typings/vue/index.d.ts" /> 

vue_test.ts 内容

namespace Test

    export class MyClass
    
        public initialize()
        
            var component = this.getComponent();
        

        private getComponent(): Vue.Component
        
            return Vue.component("test", 
                template: "<div></div>",
                props: ["test"],
                methods: 
                    onClick: () =>
                    
                    
                
            );
        
    

我希望我可以访问Vue.Component 命名空间和typings/vue/index.d.ts 中声明的其他命名空间，但情况似乎并非如此。

我确实尝试将导出的类导入global，如下所示：

import * as _Vue from "./index";

declare global

    export class Vue extends _Vue
    

    

但是，这只允许我访问根 Vue 类，因此我无法执行诸如将 Vue.Component 指定为类型或 Vue 之外的任何其他命名空间之类的操作。

其他信息： 视觉工作室 2015 Vue.js 版本 2.2.1 TypeScript 2.1 版

根据@unional 的建议更新 这是我的新文件夹结构：

不再使用 _references.d.ts，而是使用 tsconfig.json。 tsconfig.json 文件包含以下内容：

    "compilerOptions": 
        "sourceMap": true
    ,
    "include": [
        "../../**/*.ts"
    ]

以上导入项目中的所有 .ts 文件。 ~/Scripts/typings/custom-typings/vue.d.ts 文件包含以下内容：

export * from "vue"
export as namespace Vue

Visual Studio 告诉我Cannot find module 'vue'，所以我的打字仍然不起作用，尽管 tsconfig.json 文件有效（我添加了 jQuery 打字来验证）。

这里是显示新问题的更新解决方案的链接：[link]

【问题讨论】：

我这里的答案可能就是你要找的：***.com/questions/42234096/…

@unional 我似乎无法让您的建议发挥作用。我没有 tsconfig.json 文件。也许您可以使用我在帖子中链接的示例解决方案进行演示？

可能值得创建一个。从长远来看，使用/// <reference 是非常乏味的。只需在项目的根目录中创建它即可。

我明白了。查看了您的项目，它是带有一些 TS 的 C#。很久没有在 VS 和 C# 上工作了，所以我不确定 VS 是如何配置的。也许这会起作用？ github.com/Microsoft/TypeScript/issues/…

也在这里：github.com/Microsoft/TypeScript/wiki/…

【参考方案1】：

使用 NPM

下拉到应用根目录中的命令行以使用 NPM 和 TypeScript 命令行界面。

如果您还没有 package.json 文件，请先运行 npm init。 然后安装 vue.js，运行npm install --save vue。 要安装其类型，请运行 npm install --save-dev @types/vue。 如果您还缺少 tsconfig.json 文件，请运行 tsc --init。 此时，您将能够通过运行 tsc 进行构建。

没有 NPM

不使用 NPM 是非常规的，需要大量的手动工作。这是其中一种手动方法。

下载 VueJS 2.1.1 from the GitHub repo。解压后，

把dist的内容放到Scripts/vuejs目录下， 把typings的内容放到typings/vuejs目录下， 将 tsconfig.json 文件添加到项目的根目录中，以包含此内容。

tsconfig.json

  "compilerOptions": 
    // ....... other properties omitted      
    "typeRoots": [
      "./typings/"
    ],
    "target": "es5",
    "lib": ["es2015", "dom", "es2015.promise" ]
  

然后，在将要使用 Vue 的文件的顶部，添加一个相对导入语句。

import * as Vue from "../typings/vuejs";

interface MyComponent extends Vue 
  message: string
  onClick (): void


export default 
    template: '<button @click="onClick">Click!</button>',
    data: function () 
        return 
            message: 'Hello!'
        
    ,
    methods: 
        onClick: function () 
            window.alert(this.message)
        
    

示例

这是您的 WebApplication1 示例的更新版本。

https://github.com/bigfont/***/tree/master/TypeScriptVueJsTypes

另见：

https://vuejs.org/v2/guide/typescript.html

https://github.com/vuejs/vue

【讨论】：

我们在项目中不使用 npm，所以很遗憾这不是我的解决方案

@jake 哇。我很抱歉。

@Jake 你确实在使用 NPM：github.com/BaseballTheater/BaseballTheater/blob/master/…

啊，是的，对不起 - 我在你链接的项目中这样做，但不是在我需要解决这个问题的所有项目中。 :(

这个答案不正确。 npm 安装的“类型”是“存根”，您会收到警告：“@types/vue@2.0.0: This is a stub types definition for vuejs (github.com/vuejs/vue). vuejs 提供了自己的类型定义，所以你不需要安装@types/vue！”

【参考方案2】：

由于错误是在编译时，所以没有什么大问题。您可以使用此插件从 here

进行更快的开发

另外，代码应该是这样的

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates the class is a Vue component
@Component(

  template: ''
)
export default class MyComponent extends Vue 

等等。你仍然可以在你的 cshtml 文件中使用 vuejs。

【参考方案3】：

我可以使用@unional 评论中的信息，但稍作改动：

我将此添加到我的 custom-vue.d.ts 文件中：

import * as _Vue from 'vue';
export as namespace Vue;
export = _Vue; 

此外，我必须使用以下内容创建一个 package.json 文件：

    "dependencies": 
        "vue": "^2.2.1"
    

最后，我需要在tsconfig.json 文件的同一范围内添加一个node_modules 文件夹。它有以下内容：

+-- node_modules
|   +-- vue
|   |   +-- package.json
|   |   +-- types
|   |   |   +-- index.d.ts
|   |   |   +-- options.d.ts
|   |   |   +-- plugin.d.ts
|   |   |   +-- vnode.d.ts
|   |   |   +-- vue.d.ts

package.json 简单包含：

  "typings": "types/index.d.ts"

现在一切正常

编辑 或者，我发现我可以通过将tsconfig.json 的moduleResolution 属性设置为Classic 来避免整个node_modules。之后，我将 custom-vue.d.ts 导入更改为如下所示：

import * as _Vue from "../vue/index";

【讨论】：

干得好。我突然想到你可以在本地使用 NPM，然后添加它的输出并安装到版本控制中。这与您手动完成的操作很接近。此外，要了解 node_modules 发生了什么，您可以在此处阅读有关模块分辨率的文章：typescriptlang.org/docs/handbook/module-resolution.html

@ShaunLuttin 是的，这很有趣。实际上，我已经通过使用Classic 模块解析再次重新修改了一些东西以避免 node_modules 的东西。我编辑了我的答案以反映这一点。