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：在我的主文件中，我有import App from './App'，但是“./App”用红色加下划线，因为VS Code无法找到.ts文件。有没有办法让编辑器在编译时（编辑时）之前识别.vue？

更新（2018-03-25）：我强烈建议每个想要设置打字稿的人阅读this

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'

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

Answer 2

对于Q2，vue-class-component附带了一个解决方案sfc.d.ts，希望它可以帮到你。如果您对Q1有任何想法，请通知我

Answer 3

对于Q1，我找到了一个很好的VS代码扩展，名为vetur，支持intellisense

对于Q2，用.vue文件无法实现，只需要使用带有模板的.ts

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

3 个答案: