web-dev-qa-db-ja.com

Visual Studioで動作するTypeScriptのVue.js 2.0タイプを取得するにはどうすればよいですか？

VisualStudioのTypeScriptでVue.js2.0タイピングを機能させようとしています。以前、DefinitelyTypedの これらのタイピング を使用していましたが、Vue.js 1.0用であるため、一致しません。ただし、それらは問題なく機能し、Vueタイプで機能させてくれました。

それ以来、Vue.jsリリースに付属するタイピングファイルの使用に移行しました（ ここ ）。 ~/Scripts/typings/vueフォルダーのプロジェクトにそれらを含めましたが、私のプロジェクトはそれらを理解していません。

これらのタイピングファイルは、インポート/エクスポートを介して使用するためのものであることを収集しましたか？この方法で使用している他のタイピングファイルはありません。そのため、自分のプロジェクトでグローバルに使用できるようにタイピングを正しく実装する方法がわかりません。

私が試したことの例を示すサンプルソリューションがあります--- 私のgithubリポジトリからここからダウンロードしてください 。

Scriptsフォルダの構造は次のとおりです。

enter image description here

_ references.d.tsコンテンツ

/// <reference path="typings/vue/index.d.ts" />

vue_test.tsコンテンツ

namespace Test
{
    export class MyClass
    {
        public initialize()
        {
            var component = this.getComponent();
        }

        private getComponent(): Vue.Component
        {
            return Vue.component("test", {
                template: "<div></div>",
                props: ["test"],
                methods: {
                    onClick: () =>
                    {
                    }
                }
            });
        }
    }
}

私が期待するのは、Vue.Component名前空間およびtypings/vue/index.d.tsで宣言されている他の名前空間にアクセスできることですが、そうではないようです。

次のように、エクスポートしたクラスをglobalにインポートしようとしました。

import * as _Vue from "./index";

declare global
{
    export class Vue extends _Vue
    {

    }
}

ただし、これではルートVueクラスにしかアクセスできないため、タイプとしてVue.Componentを指定したり、Vue以外の名前空間を指定したりすることはできません。

その他の情報：
Visual Studio 2015
Vue.jsバージョン2.2.1
TypeScriptバージョン2.1

@ unionalからの提案後のUPDATEこれが私の新しいフォルダ構造です： enter image description here

代わりにtsconfig.jsonを使用して、_references.d.tsを削除します。 tsconfig.jsonファイルには次のものが含まれています。

{
    "compilerOptions": {
        "sourceMap": true
    },
    "include": [
        "../../**/*.ts"
    ]
}

上記はプロジェクトのすべての.tsファイルをインポートします。 ~/Scripts/typings/custom-typings/vue.d.tsファイルには次のものが含まれています。

export * from "vue"
export as namespace Vue

VisualStudioはCannot find module 'vue'を教えてくれるので、tsconfig.jsonファイルは機能しますが、タイピングはまだ機能しません（jQueryタイピングを追加して確認しました）。

新しい問題を示す更新されたソリューションへのリンクは次のとおりです。 [link]

visual-studiotypescriptvue.jsvuejs2typescript-typings
14
Jake

@unionalのコメントからの情報を使用することができましたが、わずかな変更がありました。

これをcustom-vue.d.tsファイルに追加しました。

_import * as _Vue from 'vue';
export as namespace Vue;
export = _Vue; 
_

さらに、次のように_package.json_ファイルを作成する必要がありました。

_{
    "dependencies": {
        "vue": "^2.2.1"
    }
}
_

最後に、_node_modules_ファイルと同じスコープに_tsconfig.json_フォルダーを追加する必要がありました。次のものがあります。

_+-- node_modules
|   +-- vue
|   |   +-- package.json
|   |   +-- types
|   |   |   +-- index.d.ts
|   |   |   +-- options.d.ts
|   |   |   +-- plugin.d.ts
|   |   |   +-- vnode.d.ts
|   |   |   +-- vue.d.ts
_

_package.json_ simpleに含まれるもの：

_{
  "typings": "types/index.d.ts"
}
_

そして物事は今働いています

編集
あるいは、_node_modules_のmoduleResolutionのプロパティをClassicに設定することで、_tsconfig.json_全体を回避できることを発見しました。その後、_custom-vue.d.ts_インポートを次のように変更しました。

_import * as _Vue from "../vue/index";
_
1
Jake

NPMを使用

アプリのルートディレクトリのコマンドラインにドロップダウンして、NPMとTypeScriptコマンドラインインターフェイスを使用します。

  • Package.jsonファイルがまだない場合は、最初にnpm initを実行します。
  • 次に、vue.jsをインストールするには、npm install --save vueを実行します。
  • そのタイプをインストールするには、npm install --save-dev @types/vueを実行します。
  • Tsconfig.jsonファイルも不足している場合は、tsc --initを実行します。
  • その時点で、tscを実行してビルドできるようになります。

NPMなし

NPMを使用しないことは型破りであり、多くの手作業が必要になります。これがそれらの手動アプローチの1つです。

VueJS 2.1.1をダウンロード GitHubリポジトリから 。アーカイブを抽出した後、

  1. distの内容をScripts/vuejsディレクトリに置きます。
  2. typingsの内容をtypings/vuejsディレクトリに置きます。
  3. このコンテンツを含むtsconfig.jsonファイルをプロジェクトのルートに追加します。

tsconfig.json

{
  "compilerOptions": {
    // ....... other properties omitted      
    "typeRoots": [
      "./typings/"
    ],
    "target": "es5",
    "lib": ["es2015", "dom", "es2015.promise" ]
  }
}

次に、Vueを使用するファイルの先頭に、相対インポートステートメントを追加します。

import * as Vue from "../typings/vuejs";

interface MyComponent extends Vue {
  message: string
  onClick (): void
}

export default {
    template: '<button @click="onClick">Click!</button>',
    data: function () {
        return {
            message: 'Hello!'
        }
    },
    methods: {
        onClick: function () {
            window.alert(this.message)
        }
    }
}

例

これは、WebApplication1の例の更新バージョンです。

https://github.com/bigfont/StackOverflow/tree/master/TypeScriptVueJsTypes

以下も参照してください。

https://vuejs.org/v2/guide/TypeScript.html

https://github.com/vuejs/vue

7
Shaun Luttin

エラーはコンパイル時なので、大きな問題はありません。このプラグインを使用して、ここからの開発を高速化できます

また、コードは次のようになります

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates the class is a Vue component
@Component({

  template: ''
})
export default class MyComponent extends Vue {



}

等々。 cshtmlファイル内でvuejsを引き続き使用できます。

1
Aravind