VSコードを使って.vueファイルでTypescriptを操作するには？

Question

私はVisual Studioコード、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：すべてが正常に動作しているが、それは.TSファイルで起こるように私は<script lang="ts">タグ内にインテリセンスを持っていると思いますので、どのように私は達成することができますそれ？

質問2：私のmain.tsにはimport App from './App'がありますが、VSコードは.tsファイルを見つけることができないので、 "./App"には赤で下線が引かれています。エディタにコンパイル時間の前に.vueを認識させる方法がありますか？

Answer 1

内部テンプレートと.TSは、同じようApp.vueでそれを別のscript.tsファイルに活字体のコードを入れて、次のとおりです。@Oswaldoにより示唆されるように、Q2については

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

、あなたは01に定義することができます次の内容を持っているファイル：

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

あなたは​​フォルダにこのファイルを置く場合、あなたは

"typeRoots": ["./typings"] 

ようなあなたのtsconfig.jsonで、このタイプのファイルをインクルードする必要があり次にあなたが*.vueファイルをインポートすることができます.vue接尾：

import App from './App.vue' 

あなたはを含めるのは好きではない場合Postfixは、あなたは、このようなsrc/componentsのような単一のフォルダ内のすべてのVueのコンポーネントを入れて、次のように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のための任意のアイデアを持っている場合は、Q1のために私に

Answer 3

ご連絡ください、私はコードの拡張子VS素敵を見つけたそれは.vueファイルでは達成できないQ2についてはインテリセンスのサポート

でveturと呼ばれ、のみを使用する必要がありますQ1のためにそれ