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

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

Это мой компонент 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 до времени компиляции (во время редактирования)?

Ответ 1

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

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

В Q2, как предложено @Oswaldo, вы можете определить файл vue.d.ts, который имеет следующий контент:

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

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

"typeRoots": ["./typings"]

Затем вы можете импортировать файл *.vue с postfix .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'

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

Ответ 2

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

Ответ 3

В Q1 я нашел красивое расширение кода VS, называемое vetur с поддержкой intellisense

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