Как я могу получить Vue.JS 2.0 typings для TypeScript, работающего с Visual Studio?
я пытаюсь дозвониться до вю.JS 2.0 typings работает с TypeScript в Visual Studio. Раньше я использовал эти typings от DefinitelyTyped, но они для Vue.js 1.0 и, таким образом, не совпадают. Тем не менее, они работали просто отлично, и позвольте мне работать с Vue
тип.
С тех пор я перешел на использование файлов ввода, которые поставляются с Vue.выпуски js (здесь). Я включил их в свой проект в my ~/Scripts/typings/vue
папка, но мой проект не понимает их.
я понял, что эти файлы ввода предназначены для использования через импорт/экспорт, возможно? Я не использую другие файлы ввода, которые работают таким образом, поэтому я не уверен, как правильно реализовать типы, чтобы они были доступны глобально для моего проекта.
у меня есть пример решения, которое показывает пример того, что я пробовал - скачать здесь из моего репозитория github.
вот структура моего :
_references.д.ТС содержание
/// <reference path="typings/vue/index.d.ts" />
vue_test.ТС содержание
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
{
}
}
однако это позволяет мне получить доступ только к root Vue
класс, и поэтому я не могу делать такие вещи, как указать Vue.Component
как тип, или любое другое пространство имен за пределы Vue
.
прочая информация:
Visual Studio 2015
Вью.js версии 2.2.1
TypeScript версии 2.1
обновление после предложений от @unional
Вот моя новая папка структура:
больше никаких _references.d.ts, используя tsconfig.вместо json-файле. В tsconfig.файл json содержит следующее:
{
"compilerOptions": {
"sourceMap": true
},
"include": [
"../../**/*.ts"
]
}
вышеуказанное импортирует все .TS файлы в проект. The ~/Scripts/typings/custom-typings/vue.d.ts
файл содержит следующее:
export * from "vue"
export as namespace Vue
Visual Studio говорит мне Cannot find module 'vue'
, поэтому мои шрифты все еще не функционируют, хотя tsconfig.файл json работает (я добавил ввод jQuery, чтобы проверить это).
вот ссылка на обновлено решение, показывающее новые проблемы:[ссылка]
3 ответов
С НПМ
выпадающий в командной строке в корневом каталоге вашего приложения, чтобы использовать NPM и интерфейс командной строки TypeScript.
- если у вас еще нет пакета.файл json, затем сначала запустите
npm init
. - затем установить vue.Яш, работать
npm install --save vue
. - для установки его типов запустите
npm install --save-dev @types/vue
. - Если Вам также не хватает tsconfig.файл json, затем запустите
tsc --init
. - в этот момент Вы сможете построить бегом
tsc
.
без НПМ
не использовать NPM нетрадиционно и потребует много ручной работы. Вот один из таких ручных подходов.
Скачать VueJS 2.1.1 из репозитория GitHub. После извлечения архива,
- положите содержимое
dist
на , - положите содержимое
typings
на
поскольку ошибка во время компиляции, в ней нет большой проблемы. вы можете использовать этот плагин для более быстрого развития от здесь
кроме того, код должен быть как
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 {
}
и так далее. Вы все еще можете использовать vuejs внутри ваших файлов cshtml.
я смог использовать информацию из комментария @unional, но с небольшим изменением:
я добавил Это к моему обычаю-vue.д.файл ТС:
import * as _Vue from 'vue';
export as namespace Vue;
export = _Vue;
кроме того, мне пришлось создать package.json
файл со следующим:
{
"dependencies": {
"vue": "^2.2.1"
}
}
наконец, мне нужно добавить 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"
}
и теперь все Работа
редактировать
В качестве альтернативы я обнаружил, что могу избежать целого node_modules
что параметр на moduleResolution
to Classic
. После этого я изменил свой custom-vue.d.ts
импорт, чтобы выглядеть так:
import * as _Vue from "../vue/index";