web-dev-qa-db-ja.com

VS Codeを使用して.vueファイルでTypeScriptを操作するにはどうすればよいですか？

私はVisual Studio Code、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：すべて正常に動作していますが、インテリセンスを<script lang="ts">タグが.tsファイルで発生するので、どうすればそれを実現できますか？

質問2：main.tsにはimport App from './App'が、VS Codeが.tsファイルを見つけられないため、「./ App」には赤の下線が付いています。コンパイル時（編集時）にエディタが.vueを認識するようにする方法はありますか？

Update（2018-03-25）：TypeScriptをセットアップして、 this

typescriptvue.jsvisual-studio-codevuejs2
17
Oswaldo

Q1の場合、TypeScriptコードを別のscript.tsファイルに入れ、App.vueに含めます：

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

Q2では、@ Oswaldoが示唆するように、次の内容を持つvue.d.tsファイルを定義できます。

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

このファイルを${Project_ROOT}/typingsフォルダーに配置する場合、このタイプのファイルをtsconfig.jsonのように含める必要があります

"typeRoots": ["./typings"]

次に、*.vue後置記号付きの.vueファイルをインポートできます。

import App from './App.vue'

.vue接尾辞を含めたくない場合は、すべてのVueコンポーネントをsrc/componentsなどの単一フォルダーに入れて、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'

どちらもエレガントなソリューションではありませんが、赤い下線は消えています。

7
Ying

Q2の場合、vue-class-componentにはソリューションが付属しています。 sfc.d.ts Q1のアイデアがあれば、お知らせください

1
webon

第1四半期には、インテリセンスをサポートする vetur というNice VS Code拡張機能が見つかりました

Q2の場合、.vueファイルでは実現できません。テンプレートで.tsのみを使用する必要があります

0
Oswaldo