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

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.

For Q2, vue-class-component come with a solution,sfc.d.ts,hope it can helps you. If you have any idea for Q1, please inform me

For Q1 I found a nice VS Code extension called vetur with intellisense support

For Q2 It can't be achieved with .vue files, need to use only .ts with template inside it