如何使用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">在.ts文件中有标签内部的智能感知,那么我该如何实现呢？

问题2:在我的main.ts中import App from './App',但是"./App"以红色加下划线,因为VS Code无法找到.ts文件.有没有办法让编辑器在编译时(编辑时)之前识别.vue？

更新(2018-03-25):我强烈建议每个想要设置打字稿的人阅读本文

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'

两者都不是优雅的解决方案,但红色下划线已经消失.