如何使用 VS Code 在 .vue 文件中使用 Typescript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42058620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to work with Typescript in .vue files using VS Code?
提问by Oswaldo
I'm using Visual Studio Code, Vue 2 (webpack template) and Typescript.
我正在使用 Visual Studio Code、Vue 2（webpack 模板）和 Typescript。
This is my App.vue component:
这是我的 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>
Question 1: Everything is working fine, but I would like to have intellisense inside <script lang="ts">tag as it happens in .ts files, so how can I achieve that?
问题 1：一切正常，但我希望<script lang="ts">在 .ts 文件中包含智能感知内部标签，那么我该如何实现呢？
Question 2: In my main.ts I have import App from './App', but "./App" is underlined in red since VS Code can't find the .ts file. Is there a way to make the editor recognizes .vue before compile time (in editing time)?
问题 2：在我的 main.ts 中有import App from './App'，但“./App”用红色下划线标出，因为 VS Code 找不到 .ts 文件。有没有办法让编辑器在编译时（在编辑时）之前识别 .vue？
Update(2018-03-25): I highly recommend everyone who wants to setup typescript to read this
更新（2018-03-25）：我强烈推荐所有想要设置打字稿的人阅读本文
采纳答案by Ying
For Q1, put the Typescript code into a separate script.tsfile and include it in App.vuelike:
对于 Q1，将 Typescript 代码放入一个单独的script.ts文件中，并将其包含在App.vue如下文件中：
<script lang="ts">
import s from './script'
export default s
</script>
For Q2, as suggested by @Oswaldo, you can defined a vue.d.tsfile that has the following content:
对于 Q2，正如@Oswaldo 所建议的，您可以定义一个vue.d.ts包含以下内容的文件：
declare module '*.vue' {
import Vue = require('vue')
const value: Vue.ComponentOptions<Vue>
export default value
}
If you put this file in the ${Project_ROOT}/typingsfolder, you need to include this type file in your tsconfig.jsonlike
如果你把这个文件放在文件${Project_ROOT}/typings夹中，你需要在你tsconfig.json喜欢的地方包含这个类型的文件
"typeRoots": ["./typings"]
Then you can import *.vuefile with the .vuepostfix:
然后您可以*.vue使用.vue后缀导入文件：
import App from './App.vue'
If you don't like to include the .vuepostfix, you can put all Vue components in a single folder such as src/componentsand change the vue.d.tsas the following:
如果您不喜欢包含.vue后缀，您可以将所有 Vue 组件放在一个文件夹中，例如src/components并将其更改vue.d.ts为以下内容：
declare module 'src/components/*' {
import Vue = require('vue')
const value: Vue.ComponentOptions<Vue>
export default value
}
The srcis defined webpack.base.conf.jsas an alias for an absolute path.
在src被定义webpack.base.conf.js为绝对路径的别名。
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'src': resolve('src')
}
}
Then you need to use the full path to import a component without the .vuepostfix:
然后你需要使用完整路径来导入一个没有.vue后缀的组件：
import App from 'src/components/App'
Both are not elegant solutions but the red underline is gone.
两者都不是优雅的解决方案，但红色下划线消失了。
