visual-studio - vscode - vue cli

¿Cómo puedo obtener tipificaciones de Vue.js 2.0 para TypeScript que funciona con Visual Studio?

Question

Estoy tratando de obtener tipificaciones de Vue.js 2.0 trabajando con TypeScript en Visual Studio. Anteriormente, había utilizado estos typings de DefinitelyTyped, pero son para Vue.js 1.0 y, por lo tanto, no coinciden. Sin embargo, funcionaron muy bien y me dejaron trabajar con el tipo Vue .

Desde entonces hice la transición al uso de los archivos de tipeo que vienen con las versiones de Vue.js ( aquí ). Los he incluido en mi proyecto en mi carpeta ~/Scripts/typings/vue , pero mi proyecto no los entiende.

He llegado a la conclusión de que estos archivos de tipeo están destinados a ser utilizados a través de la importación / exportación posiblemente? No hay otros archivos de tipeo que estoy usando que funcionen de esta manera, así que no estoy seguro de cómo implementar correctamente los typings de modo que estén disponibles globalmente para mi proyecto.

Tengo una solución de muestra que muestra un ejemplo de lo que probé. Descárguelo aquí desde mi repositorio github .

Aquí está la estructura de mi carpeta de Scripts :

_references.d.ts contents

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

vue_test.ts contents

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: () =>
{
}
}
});
}
}
}

Lo que esperaría es que tendría acceso al espacio de nombres Vue.Component y a otros espacios de nombres declarados en typings/vue/index.d.ts , pero este no parece ser el caso.

Intenté importar la clase exportada a global , así:

import * as _Vue from "./index";
declare global
{
export class Vue extends _Vue
{
}
}

Sin embargo, esto solo me permite acceder a la clase Vue raíz y, por lo tanto, no puedo hacer cosas como especificar Vue.Component como un tipo, o cualquier otro espacio de nombres más allá de Vue .

Otra información:
Visual Studio 2015
Vue.js versión 2.2.1
Versión de TypeScript 2.1

ACTUALIZAR después de las sugerencias de @unional Aquí está mi nueva estructura de carpetas:

No más _references.d.ts, usando tsconfig.json en su lugar. El archivo tsconfig.json contiene esto:

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

Lo anterior importa todos los archivos .ts en el proyecto. El archivo ~/Scripts/typings/custom-typings/vue.d.ts contiene lo siguiente:

export * from "vue"
export as namespace Vue

Visual Studio me dice Cannot find module ''vue'' , por lo que mis tipificaciones aún no funcionan, aunque el archivo tsconfig.json funciona (agregué el tipado de jQuery para verificarlo).

Aquí hay un enlace a la solución actualizada que muestra los nuevos problemas: [enlace]

Answer 1

Como el error está en tiempo de compilación, no hay un gran problema. puedes usar este complemento para un desarrollo más rápido desde aquí

Además, el código debe ser como

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 {
}

y así. Todavía puede usar vuejs dentro de sus archivos cshtml.

Answer 2

Con NPM

Desplácese hasta la línea de comando en el directorio raíz de su aplicación para usar NPM y la interfaz de línea de comandos de TypeScript.

• Si aún no tiene un archivo package.json, primero ejecute npm init .
• Luego, para instalar vue.js, ejecute npm install --save vue .
• Para instalar sus tipos ejecute npm install --save-dev @types/vue .
• Si también le falta un archivo tsconfig.json, ejecute tsc --init .
• En ese punto, podrá construir ejecutando tsc .

Sin NPM

No usar NPM no es convencional y requerirá mucho trabajo manual. Este es uno de esos enfoques manuales.

Descargue VueJS 2.1.1 desde el repositorio de GitHub . Después de extraer el archivo,

1. Coloque el contenido de dist en el directorio Scripts/vuejs ,
2. Coloque el contenido de los typings en el directorio de typings/vuejs ,
3. Agregue un archivo tsconfig.json a la raíz de su proyecto que contenga este contenido.

tsconfig.json

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

Luego, en la parte superior del archivo que usará Vue, agregue una declaración de importación relativa.

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)
}
}
}

Ejemplo

Aquí hay una versión actualizada de su ejemplo de WebApplication1.

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

Ver también:

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

https://github.com/vuejs/vue

Answer 3

Pude utilizar la información del comentario de @ unional, pero con un ligero cambio:

Agregué esto a mi archivo custom-vue.d.ts:

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

Además, tuve que crear un archivo package.json con lo siguiente:

{
"dependencies": {
"vue": "^2.2.1"
}
}

Finalmente, necesité agregar una carpeta node_modules en el mismo alcance que mi archivo tsconfig.json . Tiene lo siguiente:

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

package.json simple contiene:

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

Y las cosas ahora están FUNCIONANDO

Editar
Alternativamente, descubrí que podía evitar todo el asunto node_modules estableciendo la propiedad de moduleResolution para moduleResolution en Classic . Después de hacer eso, cambié mi importación custom-vue.d.ts para que se vea así:

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