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

postfix

关注

发信

关注(28)粉丝(399)

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

本文介绍了如何使用 VS Code 在 .vue 文件中使用 Typescript?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的是 Visual Studio Code、Vue 2(webpack 模板)和 Typescript.

这是我的 App.vue 组件:

<div id="应用程序"><导航栏></导航栏>[内容在这里]

<script lang="ts">从'./components/Navbar'导入导航栏导出默认{成分: {导航栏}}

问题 1:一切正常，但我想在 <script lang="ts"> 标签中包含智能感知，因为它发生在 .ts 文件中，那么我该如何实现那个?

问题 2:在我的 main.ts 中，我有 import App from './App'，但./App"用红色下划线标出，因为 VS Code 找不到 .ts 文件.有没有办法让编辑器在编译前(在编辑时)识别 .vue?

更新 (2018-03-25):我强烈推荐所有想要设置 typescript 的人阅读这个

解决方案

对于 Q1，将 Typescript 代码放到单独的 script.ts 文件中，并包含在 App.vue 中代码>喜欢:

对于 Q2，按照@Oswaldo 的建议，您可以定义一个 vue.d.ts 文件，其内容如下:

声明模块'*.vue'{import Vue = require('vue')const 值:Vue.ComponentOptions导出默认值}

如果您将此文件放在 ${Project_ROOT}/typings 文件夹中，则需要将此类型文件包含在您的 tsconfig.json 中，例如

"typeRoots": ["./typings"]

然后你可以导入带有.vue后缀的*.vue文件:

从'./App.vue'导入应用程序

如果你不喜欢包含 .vue 后缀，你可以将所有 Vue 组件放在一个文件夹中，例如 src/components 并更改 vue.d.ts 如下:

声明模块 'src/components/*' {import Vue = require('vue')const 值:Vue.ComponentOptions导出默认值}

src 被定义为 webpack.base.conf.js 作为绝对路径的别名.

解析:{扩展名:['.js', '.vue', '.json', '.ts'],别名:{'vue$': 'vue/dist/vue.esm.js','src':解析('src')}}

然后需要使用完整路径导入一个没有.vue后缀的组件:

从'src/components/App'导入应用程序

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

I'm using Visual Studio Code, Vue 2 (webpack template) and Typescript.

This is my App.vue component:

<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?

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)?

Update (2018-03-25): I highly recommend everyone who wants to setup typescript to read this

解决方案

For Q1, put the Typescript code into a separate script.ts file and include it in App.vue like:

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

For Q2, as suggested by @Oswaldo, you can defined a vue.d.ts file that has the following content:

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

If you put this file in the ${Project_ROOT}/typings folder, you need to include this type file in your tsconfig.json like

"typeRoots": ["./typings"]

Then you can import *.vue file with the .vue postfix:

import App from './App.vue'

If you don't like to include the .vue postfix, you can put all Vue components in a single folder such as src/components and change the vue.d.ts as the following:

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

The src is defined webpack.base.conf.js as an alias for an absolute path.

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 .vue postfix:

import App from 'src/components/App'

Both are not elegant solutions but the red underline is gone.

这篇关于如何使用 VS Code 在 .vue 文件中使用 Typescript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-18 10:00