如何使用 VS Code 在 .vue 文件中使用 Typescript？

Question

我正在使用 Visual Studio Code、Vue 2（webpack 模板）和 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：一切正常，但我想在 <script lang="ts"> 标签中加入 intellisense，因为它发生在 .ts 文件中，那么我该如何实现呢？

问题 2：在我的 main.ts 中，我有 import App from './App' ，但是“./App”带有红色下划线，因为 VS Code 找不到 .ts 文件。有没有办法让编辑器在编译时（编辑时）识别 .vue？

更新（2018-03-25）：我强烈推荐所有想要设置打字稿的人阅读 这篇 文章

原文由 Oswaldo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 .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'

两者都不是优雅的解决方案，但红色下划线消失了。

原文由 Ying 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于第一季度，我发现了一个很好的 VS 代码扩展名为 vetur ，具有智能感知支持

对于 Q2 它不能用 .vue 文件来实现，只需要使用 .ts 和里面的模板

原文由 Oswaldo 发布，翻译遵循 CC BY-SA 3.0 许可协议