web-dev-qa-db-fra.com

Comment travailler avec TypeScript dans des fichiers .vue en utilisant VS Code?

J'utilise le code Visual Studio, Vue 2 (modèle de pack Web) et TypeScript.

Voici mon composant App.vue:

<template>
    <div id="app">
        <navbar></navbar>
        [content here]
    </div>
</template>

<script lang="ts">
    import Navbar from './components/Navbar'

    export default {
        components: {
            Navbar
        }
    }
</script>

Question 1: Tout fonctionne correctement, mais j'aimerais que intellisense soit dans la balise <script lang="ts"> comme cela se produit dans les fichiers .ts, comment puis-je y parvenir?

Question 2: Dans mon fichier principal, j'ai import App from './App', mais "./App" est souligné en rouge car VS Code ne peut pas trouver le fichier .ts. Existe-t-il un moyen de faire en sorte que l'éditeur reconnaisse .vue avant la compilation (en temps d'édition)?

Update (2018-03-25): Je recommande vivement à tous ceux qui souhaitent configurer TypeScript de lire this

typescriptvue.jsvisual-studio-codevuejs2
14
Oswaldo

Pour Q1, placez le code TypeScript dans un fichier script.ts séparé et incluez-le dans App.vue comme suit:

<script lang="ts">
   import s from './script'
   export default s
</script>

Pour Q2, comme suggéré par @Oswaldo, vous pouvez définir un fichier vue.d.ts ayant le contenu suivant: 

declare module '*.vue' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

Si vous placez ce fichier dans le dossier ${Project_ROOT}/typings, vous devez inclure ce type dans votre tsconfig.json comme

"typeRoots": ["./typings"]

Ensuite, vous pouvez importer le fichier *.vue avec le suffixe .vue: 

import App from './App.vue'

Si vous n'aimez pas inclure le suffixe .vue, vous pouvez placer tous les composants Vue dans un seul dossier, tel que src/components, et modifier le vue.d.ts comme suit: 

declare module 'src/components/*' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

src est défini webpack.base.conf.js en tant qu'alias pour un chemin absolu. 

resolve: {
  extensions: ['.js', '.vue', '.json', '.ts'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    'src': resolve('src')
  }
}

Ensuite, vous devez utiliser le chemin complet pour importer un composant sans le suffixe .vue: 

import App from 'src/components/App'

Les deux ne sont pas des solutions élégantes mais le soulignement rouge est parti. 

6
Ying

Pour Q2, vue-class-Component est livré avec une solution, sfc.d.ts , j'espère que cela vous aidera. Si vous avez une idée pour Q1, s'il vous plaît informez-moi

1
webon

Pour Q1, j'ai trouvé une extension de Nice VS Code appelée vetur avec le support intellisense

Pour Q2 Cela ne peut pas être réalisé avec des fichiers .vue, vous devez utiliser uniquement .ts avec un modèle à l'intérieur

1
Oswaldo