So wenden Sie TypeScript-Klassen in Vue-Projekten an

importiere {Component,Vue} aus „vue-property-decorator“; 
importiere {KomponenteA,KomponenteB} aus '@/Komponenten'; 
 
 @Komponente({ 
    Komponenten: { 
        KomponenteA, 
        Komponente B, 
    }, 
    Anweisungen: { 
        Fokus: 
            // Definition der Anweisung eingefügt: function (el) { 
                el.fokus() 
            } 
        } 
    } 
}) 
exportiere Standardklasse YourComponent erweitert Vue{ 
    
} 

@Komponente 
exportiere Standardklasse HelloDecorator erweitert Vue { 
    count: number = 123 // Das Klassenattribut entspricht den vorherigen Daten 
 
    add(): number { // Die Klassenmethode ist die gleiche wie die vorherige Methode this.count + 1 
    } 
 
    // Das berechnete Attribut abrufen get total(): number { 
      gib dies zurück.Anzahl + 1 
    } 
 
    // Die berechneten Eigenschaften festlegen set total(param:number): void { 
      this.count = Parameter 
    } 
} 

importiere {Component,Vue,Prop} vom Vue-Eigenschaftsdekorator; 
 
@Komponente 
exportiere Standardklasse YourComponent erweitert Vue { 
    @Prop(Zeichenfolge) 
    propA: Zeichenfolge; 
     
    @Prop([Zeichenfolge,Zahl]) 
    propB:Zeichenfolge|Zahl; 
     
    @Stütze({ 
     Typ: String, // Typ: [String, Zahl] 
     Standard: „Standardwert“, // normalerweise eine Zeichenfolge oder Zahl 
      //Wenn es ein Objekt oder ein Array ist. Der Standardwert wird von einer Factory-Funktion zurückgegeben // default: () => { 
      // returniere ['a','b'] 
      // } 
     erforderlich: wahr, 
     validator: (Wert) => { 
        zurückkehren [ 
          'In Bearbeitung', 
          "Erledigt" 
        ].indexOf(Wert) !== -1 
     } 
    }) 
    propC: Zeichenfolge; 
} 

importiere { Vue, Komponente, Watch } von 'vue-property-decorator' 
 
@Komponente 
exportiere Standardklasse YourComponent erweitert Vue { 
  @Watch('Kind') 
  beiKindGeändert(Wert: Zeichenfolge, alterWert: Zeichenfolge) {} 
 
  @Watch('Person', { unmittelbar: wahr, tief: wahr }) 
  beiPersonGeändert1(Wert: Person, alterWert: Person) {} 
 
  @Watch('Person') 
  beiPersonGeändert2(Wert: Person, alterWert: Person) {} 
} 

importiere {Vue, Komponente, Emit} von „vue-property-decorator“; 
    @Komponente({}) 
    exportiere Standardklasse Einige erweitert Vue{ 
        montiert(){ 
            dies.$on('emit-todo', Funktion(n) { 
                console.log(n) 
            }) 
            dies.emitTodo('Welt'); 
        } 
        @Emittieren() 
        emitTodo(n: Zeichenfolge){ 
            console.log('hallo'); 
        } 
    }