Vue プロジェクトで TypeScript クラスを適用する方法

'vue-property-decorator' から {Component,Vue} をインポートします。 
'@/components' から {componentA,componentB} をインポートします。 
 
 @成分（{ 
    コンポーネント:{ 
        コンポーネントA、 
        コンポーネントB、 
    }, 
    ディレクティブ: { 
        集中： 
            // 挿入された命令の定義: function (el) { 
                el.フォーカス() 
            } 
        } 
    } 
}) 
デフォルトのクラスをエクスポートし、YourCompoent を Vue に拡張します{ 
    
} 

@成分 
デフォルトのクラスHelloDecoratorをエクスポートし、Vueを拡張します。 
    count: number = 123 // クラス属性は前のデータと同等です 
 
    add(): number { // クラスメソッドは前のメソッドと同じ this.count + 1 
    } 
 
    // 計算属性を取得する get total(): number { 
      this.count + 1 を返す 
    } 
 
    // 計算プロパティを設定する set total(param:number): void { 
      this.count = パラメータ 
    } 
} 

vue-property-decorator から {Component,Vue,Prop} をインポートします。 
 
@成分 
デフォルトのクラスをエクスポートし、YourComponent を Vue に拡張します { 
    @Prop(文字列) 
    propA: 文字列; 
     
    @Prop([文字列,数値]) 
    propB:文字列|数値; 
     
    @Prop({ 
     型: 文字列、// 型: [文字列、数値] 
     default: 'デフォルト値', // 通常は文字列または数値 
      // オブジェクトまたは配列の場合。デフォルト値はファクトリー関数から返されます // default: () => { 
      // ['a','b'] を返す 
      // } 
     必須: true、 
     バリデータ: (値) => { 
        戻る [ 
          「進行中」、 
          「落ち着いた」 
        ].indexOf(値) !== -1 
     } 
    }) 
    propC: 文字列; 
} 

'vue-property-decorator' から { Vue, Component, Watch } をインポートします。 
 
@成分 
デフォルトのクラスをエクスポートし、YourComponent を Vue に拡張します { 
  @Watch('子') 
  onChildChanged(値: 文字列、古い値: 文字列) {} 
 
  @Watch('person', { 即時: true, ディープ: true }) 
  onPersonChanged1(val: Person、oldVal: Person) {} 
 
  @Watch('人') 
  onPersonChanged2(val: Person、oldVal: Person) {} 
} 

'vue-property-decorator' から {Vue, Component, Emit} をインポートします。 
    @成分（{}） 
    デフォルトのクラスをエクスポートし、Some extends Vue{ 
        マウントされた(){ 
            this.$on('emit-todo', 関数(n) { 
                コンソール.log(n) 
            }) 
            this.emitTodo('world'); 
        } 
        @エミット() 
        出力Todo(n: 文字列){ 
            コンソールにログ出力します。 
        } 
    }