gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 20:32:28 24 4
gpt4 key购买 nike

我正在尝试让 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 文件夹的结构:

enter image description here

_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 的建议进行更新这是我的新文件夹结构: enter image description here

不再使用 _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]

最佳答案

使用 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

关于visual-studio - 如何获得 Vue.js 2.0 typescript for TypeScript 与 Visual Studio 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42655160/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com