Website-Suche

vue.js - Wie man mit Typescript in .vue-Dateien mit VS Code arbeitet?

Ich benutze Visual Studio Code, Vue 2 (Webpack-Vorlage) und TypeScript.

Dies ist meine App.vue-Komponente:

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

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

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

Frage 1: Alles funktioniert einwandfrei, aber ich würde gerne Intellisense innerhalb des <script lang="ts">-Tags haben, so wie es in .ts-Dateien der Fall ist. Wie kann ich das erreichen?

Frage 2: In meiner main.ts habe ich import App from './App', aber "./App" ist rot unterstrichen, da VS Code die .ts-Datei nicht finden kann. Gibt es eine Möglichkeit, dass der Editor .vue vor der Kompilierzeit (während der Bearbeitungszeit) erkennt?

Update (25.03.2018): Ich empfehle jedem, der TypeScript einrichten möchte, dies zu lesen

Antwort #1

Für Q1, legen Sie den Typescript-Code in eine separate script.ts-Datei und binden Sie ihn in App.vue ein wie:

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

Für Q2, wie von @Oswaldo vorgeschlagen, können Sie eine vue.d.ts-Datei erstellen, die den folgenden Inhalt hat:

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

Wenn Sie diese Datei im Ordner $ {Project_ROOT}/typings ablegen, müssen Sie diese Typdatei in Ihrer tsconfig.json einbeziehen wie

"typeRoots": ["./typings"]

Dann können Sie eine *.vue-Datei mit dem .vue-Postfix importieren:

import App from './App.vue'

Wenn Sie das .vue-Postfix nicht einfügen möchten, können Sie alle Vue-Komponenten in einem einzigen Ordner wie src/components ablegen und die vue.d.ts wie folgt ändern:

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

Der src wird in webpack.base.conf.js als Alias für einen absoluten Pfad definiert.

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

Dann müssen Sie den vollständigen Pfad verwenden, um eine Komponente ohne das .vue-Postfix zu importieren:

import App from 'src/components/App'

Beides sind keine eleganten Lösungen, aber die rote Unterstreichung ist weg.

Verwandte Artikel