How to work with Typescript in .vue files using VS Code?

Question

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

As for Q2, i'm using import with extension: "import {default as Question} from './Question.vue'" — TSV
Same question here. Intellisense is not working in .vue files with typescript. This question is from February, I'm surprised this issue still hasn't been solved, at least not in VS Code. — Kokodoko

Ying Ying · Accepted Answer · 2017-05-20T14:13:45

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.

How to work with Typescript in .vue files using VS Code?

3 Answers