Как работать с Typcript в файлах .vue с помощью VS Code?

Question

Я использую код Visual Studio, Vue 2 (шаблон веб-пакета) и машинописный текст.

Это мой 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> 

Вопрос 1: Все работает отлично, но я хотел бы иметь IntelliSense внутри <script lang="ts"> тега, как это происходит в .ts файлы, так как я могу достичь что?

Вопрос 2: В моем main.ts у меня есть import App from './App', но «./App» подчеркнуто красным, так как VS Code не может найти файл .ts. Есть ли способ заставить редактор распознавать .vue до времени компиляции (во время редактирования)?

Answer 1

Для Q1, поместите код машинопись в отдельный script.ts файл и включить его в App.vue как:

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

для Q2, как это было предложено @Oswaldo, вы можете определилифайл, который имеет следующее содержание:

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

Если поместить этот файл в папку ${Project_ROOT}/typings, вам необходимо включить этот тип файла в вашем tsconfig.json как

"typeRoots": ["./typings"] 

Затем вы можете импортировать *.vue файл с .vue постфикса:

import App from './App.vue' 

Если вам не нравится, чтобы включить .vue постфикса, вы можете поместить все компоненты Vue в одной папке, таких как src/components и изменить vue.d.ts как следующее:

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

src определяется webpack.base.conf.js в качестве псевдонима для абсолютного пути.

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

Тогда вам нужно использовать полный путь импортировать компонент без .vue постфикса:

import App from 'src/components/App' 

Оба не элегантные решения, но красное подчеркивание исчезают.

Answer 2

Для Q2 компонент vue-class поставляется с решением, sfc.d.ts, надеюсь, он может вам помочь. Если у вас есть какие-либо идеи для Q1, пожалуйста, сообщите мне

Answer 3

Для Q1 я нашел хороший расширение VS код называется vetur с IntelliSense поддержки

Для Q2 Это не может быть достигнуто с .vue файлов, необходимо использовать только .ts с шаблоном внутри него