コンポーネントなしのTypeScriptを使用したVue

Question

アプリケーションを開発するときに問題が発生しました。 Vue + Vuetifyでtypescriptを使用しますが、SPAアプリケーションを作成したり、.vueコンポーネントで作業するためにwebpackを使用したりする必要はありません。新しいVueインスタンスを毎回作成するいくつかのページを作成する必要があります。しかし、私は例

import * as Vue from 'Vue'; 
import axios from 'axios'; 

<any>window.vue = new Vue({ 
    el: "#app", 
    data: { 
     drawer: true, 
     mini: false, 
     totalItems: 0, 
     items: [], 
     headers: [, 
      { 
       text: 'Dessert (100g serving)', 
       align: 'left', 
       sortable: false, 
       value: 'name' 
      }, 
      { text: 'Calories', value: 'calories' }, 
      { text: 'Fat (g)', value: 'fat' }, 
     ], 

    }, 
methods: { 

    getData() { 
     axios.get("http://exmaple1234.com/api/list") 
      .then((response) => { 
       this.$data["totalItems"] = 1; 
       this.$data["items"] = [ 
        { 
         value: false, 
         name: 'Frozen Yogurt', 
         calories: 159, 
         fat: 6.0, 
        } 
       ]; 
      }) 
    } 
}, 
mounted() { 
    this.$options.methods["getData"].call("getData"); 

}, 
}); 

私はthis.totalItems、this.itemsを使用することはできませんし、私はthis.getDataを呼び出すことはできませんtypescriptですと私のtsconfig.json

{ 
    "compilerOptions": { 
    "alwaysStrict": true, 
    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "removeComments": true, 
    "sourceMap": false, 
    "target": "es5", 
    "moduleResolution": "node", 
    "allowSyntheticDefaultImports": true, 
    "lib": [ "es2017", "dom", "dom.iterable" ] 
    }, 
    "exclude": [ 
    "node_modules" 
    ], 
    "compileOnSave": true 
} 

（）内のために作成したとき（）、しかし、私は私のコードをブラウザでデバッグするとき、私はそのオブジェクト "this"がこれらのすべてのプロパティとメソッドを持っているのを見ます。

プロパティ$ data ["property"] nameと$ options.methods ["methodName"]を使用して作業しますが、これは正しいアプローチではないことを理解しています。 インタフェースまたはvue-class-componentの作成に役立つComponentOptionsについては、Vueのドキュメントを読んでいますが、これらのツールはすべて避けたいコンポーネントを使用しています。

この場合、vue + typescriptを使用できますか？私は私の質問のヒントをお礼したいと思います。

Answer 1

私はすべてのデータの属性とメソッドを記述するためのインターフェースを追加しました。 this.getData();/this.$options.methods["getData"].call(this);を追加し、新しいvueインスタンスを作成しました。

import * as Vue from 'Vue'; 
import axios from 'axios'; 

interface AppInterface extends Vue { 
    drawer: boolean, 
    mini: boolean, 
    totalItems: number, 
    items: any, 
    headers: any, 
    getData(): void 
} 

var App = { 
    el: "#app", 
    data: { 
     drawer: true, 
     mini: false, 
     totalItems: 0, 
     items: [], 
     headers: [{ 
       text: 'Dessert (100g serving)', 
       align: 'left', 
       sortable: false, 
       value: 'name' 
      }, { 
       text: 'Calories', 
       value: 'calories' 
      }, { 
       text: 'Fat (g)', 
       value: 'fat' 
      } 
     ] 
    }, 
    methods: { 
     getData() { 
      axios 
       .get("http://exmaple1234.com/api/list") 
       .then((response) => { 
        this.$data["totalItems"] = 1; 
        this.$data["items"] = [ 
         { 
          value: false, 
          name: 'Frozen Yogurt', 
          calories: 159,  
          fat: 6.0 
         } 
        ]; 
       }) 
     } 
    }, 
    mounted() { 
     // or this.$options.methods["getData"].call(this); 
     this.getData(); 
    } 
} as Vue.ComponentOptions<AppInterface> 

// new vue instance 
new Vue(App);