Erste Schritte mit TS (TypeScript) im Vue-Projekt

npm installiere Vue-Klassenkomponente Vue-Eigenschaftsdekorator --speichern
npm installiere TS-Loader Typescript tslint tslint-loader tslint-config-standard --save-dev

  lösen: {
    Erweiterungen: ['.js', '.vue', '.json', '.ts'],
    Alias: {}
  }

Modul: {
    Regeln:
      {
        Test: /\.ts$/,
        ausschließen: /node_modules/,
        erzwingen: 'pre',
        Lader: „tslint-loader“
      },
      {
        Test: /\.tsx?$/,
        Lader: „ts-loader“,
        ausschließen: /node_modules/,
        Optionen:
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ]
  }

{
  // Compileroptionen "compilerOptions": {
    // Ausgabeverzeichnis "outDir": "./output",
    // Ob eine SourceMap eingeschlossen werden soll, die zum Debuggen verwendet werden kann
    "sourceMap": wahr,
    // Im strikten Modus analysieren "strict": false,
    // Verwendetes Modulsystem "module": "esnext",
    // Wie verarbeite ich Module "moduleResolution": "node",
    // Ziel-ES-Version "target" kompilieren und ausgeben: "es5",
    // Standardimporte von Modulen zulassen, die keinen Standardexport festlegen "allowSyntheticDefaultImports": true,
    // Jede Datei als separates Modul behandeln "isolatedModules": false,
    // Dekoratoren aktivieren "experimentalDecorators": true,
    //Designtyp-Metadaten aktivieren (zur Reflektion)
    "emitDecoratorMetadata": wahr,
    // Fehler "noImplicitAny": false, wenn in Ausdrücken und Deklarationen ein impliziter Typ any vorkommt
    // Nicht alle Rückgabepfade einer Funktion geben einen Wert zurück und es wird ein Fehler gemeldet.
    "noImplicitReturns": wahr,
    // Externe Hilfsbibliotheken aus tslib importieren: wie __extends, __rest usw. "importHelpers": true,
    // Dateinamen während der Kompilierung drucken "listFiles": true,
    // Kommentare entfernen "removeComments": true,
    "suppressImplicitAnyIndexErrors": wahr,
    // Kompilierung von Javascript-Dateien zulassen "allowJs": true,
    // Basisverzeichnis zum Parsen nicht relativer Modulnamen "baseUrl": "./",
    //Pfad von Spezialmodulen angeben "paths": {
      "jquery": [
        „node_modules/jquery/dist/jquery“
      ]
    },
    // Liste der Bibliotheksdateien, die während der Kompilierung eingeführt werden müssen "lib": [
      "dom",
      "es2015",
      „es2015.promise“
    ]
  }
}

  {
    "erweitert": "tslint-config-standard",
    "Globale": {
      "erfordern": wahr
    }
  }

Deklariere das Modul '*.vue' {
  importiere Vue von „vue“;
  Standard-Vue exportieren;
}

<script lang="ts">
importiere { Komponente, Vue } von „vue-property-decorator“;
@Komponente
exportiere Standardklasse Test erweitert Vue {
  
};
</Skript>

exportiere Standardklasse Test erweitert Vue {
 öffentliche Nachricht1: Zeichenfolge = „heimayu“;
 öffentliche Nachricht2: Zeichenfolge = „Es ist wirklich wunderschön“;
}

@Stütze()
propA:Zeichenfolge

@Stütze()
propB:Nummer

 // Ursprünglicher Text: this.$emit('bindSend')
  // Schreiben Sie jetzt einfach this.bindSend()
  // Mehrere Definitionen @Emit()
  bindSend():Zeichenfolge{
      gib diese Nachricht zurück
  }

  // Ursprünglicher Text: this.$emit('bindSend', msg)
  // Jetzt direkt schreiben: this.bindSend(msg)
  // Mehrere Definitionen unten @Emit()
  bindSend(msg:Zeichenfolge){
      // etwas tun
  }

  // Hier ist test der Name des @-Ereignisses, das die Komponentenreferenz ändert. In diesem Fall sollten Sie @test statt @bindSend2 schreiben
  @Emit('test)
  private bindSend2(){
      
  }

  //Originaltext watch:{}

  @Watch('propA',{
      tief:wahr
  })
  test(neuerWert:Zeichenfolge,alterWert:Zeichenfolge){
      console.log('propA-Wert geändert' + neuerWert);
  }

öffentliche erhalten berechneteMsg(){
      return 'Hier ist die berechnete Eigenschaft' + this.message;
 }
öffentliches Set berechneteMsg(Nachricht: Zeichenfolge) {
 }

<Vorlage>
  <div Klasse="Testcontainer">
    {{Nachricht}}
    <input type="button" value="Klicken, um übergeordnete Methode auszulösen" @click="bindSend"/>
    <input type="button" value="Klicken, um übergeordnete Methode auszulösen" @click="handleSend"/>
    <input type="button" value="Klicken, um übergeordnete Methode auszulösen" @click="bindSend2"/>
    <!-- <Hallo></Hallo> -->
  </div>
</Vorlage>
<script lang="ts">
importiere { Komponente, Prop, Vue, Watch, Emit } von „vue-property-decorator“;
importiere Hallo aus "./HelloWorld.vue";
// Geben Sie an, dass diese Klasse eine Vue-Komponente ist @Component({
  Komponenten:
    Hallo
  }
})
exportiere Standardklasse Test erweitert Vue {
  // Die Daten in den Originaldaten werden erweitert und hierhin geschrieben. public message: string = "asd";
  //Erweitern Sie die Daten in den ursprünglichen Eigenschaften, um @Prop({ zu schreiben.
    Typ: Nummer,
    Standard: 1,
    erforderlich: false
  })
  propA?: Zahl
  @Stütze()
  propB:Zeichenfolge
  //Ursprünglich berechnet
  öffentliche erhalten berechneteMsg(){
      return 'Hier ist die berechnete Eigenschaft' + this.message;
  }
  öffentliches Set berechneteMsg(Nachricht: Zeichenfolge) {
  }
  //Ursprüngliches Uhrattribut @Watch('propA',{
      tief:wahr
  })
  öffentlicher Test(neuerWert:Zeichenfolge,alterWert:Zeichenfolge){
      console.log('propA-Wert geändert' + neuerWert);
  }
  // Wenn Sie früher einen Wert an das übergeordnete Element übergeben mussten, konnten Sie einfach emit in der Methode verwenden. Jetzt müssen Sie emit verwenden, um @Emit() zu verarbeiten.
  private bindSend():string{
      gib diese Nachricht zurück
  }
  @Emittieren()
  private bindSend1(msg:Zeichenfolge,love:Zeichenfolge){
      // Wenn du es nicht verarbeiten möchtest, brauchst du das Folgende nicht zu schreiben, die Parameter werden automatisch zurückgegeben // msg += 'love';
    // Nachricht zurückgeben;
  }
  //Die ursprüngliche Methode wird in Methoden angelegt public handleSend():void {
      dies.bindSend1(diese.Nachricht,'Liebe');
  }
  // Die Parameter in „emitt“ geben hier an, was das übergeordnete Element akzeptiert, ähnlich wie beim vorherigen $emit('übergeordnet definierte Methode')
  @Emit('Test')
  private bindSend2(){
      return: „Dies kann durch Test akzeptiert werden“;
  }
}
</Skript>