visual-studio - 如何获得 Vue.js 2.0 typescript for TypeScript 与 Visual Studio 一起使用？

Question

我正在尝试让 Vue.js 2.0 类型在 Visual Studio 中与 TypeScript 一起使用。以前，我用过these typings来自 DefinitelyTyped，但它们适用于 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.

其他信息:
Visual Studio 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 告诉我找不到模块“vue”，所以我的输入仍然不起作用，尽管 tsconfig.json 文件有效(我添加了 jQuery 输入来验证这一点)。

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

Answer 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 .提取存档后，

1. 将dist的内容放入Scripts/vuejs目录，
2. 将typings的内容放入typings/vuejs目录，
3. 将 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/StackOverflow/tree/master/TypeScriptVueJsTypes

另见:

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

https://github.com/vuejs/vue