Der neue TypeScript-Schnellstart-Übungsbericht des Partners Vue

Vue hat ab Version 2.6.X einige seiner Komponenten mit Ts offiziell neu geschrieben.

Ich persönlich stehe strengeren Genrebeschränkungen nicht positiv gegenüber. Schließlich sind wir an alle möglichen genreverändernden Schreibstile gewöhnt.

Eines meiner letzten Projekte ist TypeScript + Vue . Was für eine tolle Idee! Ich werde es lernen ... es macht wirklich Spaß!

Beachten Sie das „vorher“ im Titel dieses Artikels. In diesem Artikel geht es um die Verwendung Ts Mixin-Frameworks, nicht um Class API

1. Bauen Sie mit dem offiziellen Gerüst

npm install -g @vue/cli
# ODER
globales Garn-Add @vue/cli

Mit dem neuen Vue CLI Tool können Entwickler neue Projekte mit TypeScript Integration erstellen.

Führen Sie einfach vue create my-app .

Sie werden dann in der Befehlszeile aufgefordert, eine Voreinstellung auszuwählen. Wählen Sie mit den Pfeiltasten Manually select features .

Stellen Sie als Nächstes einfach sicher, dass TypeScript und Babel ausgewählt sind, wie unten gezeigt:

Sobald Sie dies getan haben, werden Sie gefragt, ob Sie class-style component syntax verwenden möchten.

Konfigurieren Sie dann die restlichen Einstellungen so, dass es wie im Bild unten aussieht.

Das Vue CLI-Tool installiert jetzt alle Abhängigkeiten und richtet das Projekt ein.

Führen Sie als Nächstes das Projekt aus

2. Projektverzeichnisanalyse

Nachdem Sie die Verzeichnisstruktur mit dem tree -Befehl angezeigt haben, können Sie feststellen, dass sich ihre Struktur stark vom normalen Aufbau unterscheidet.

Hier konzentrieren wir uns hauptsächlich auf die beiden Dateien shims-tsx.d.ts und shims-vue.d.ts

Zwei Sätze zur Zusammenfassung:

• shims-tsx.d.ts ermöglicht das Schreiben von jsx -Code in Vue Projekten mit Dateien mit der Endung .tsx
• shims-vue.d.ts wird hauptsächlich für TypeScript verwendet, um .vue Dateien zu identifizieren. Ts unterstützt den Import von vue Dateien standardmäßig nicht. Diese Datei weist ts an, .vue Dateien zu importieren und sie gemäß VueConstructor<Vue> zu verarbeiten.

Wenn wir jetzt das bekannte src/components/HelloWorld.vue öffnen, werden wir feststellen, dass die Schreibmethode ganz anders ist.

<Vorlage>
  <div Klasse="hallo">
    <h1>{{ msg }}</h1>
    <!-- ausgelassen-->
  </div>
</Vorlage>
 
<script lang="ts">
importiere { Komponente, Prop, Vue } von „vue-property-decorator“;
 
@Komponente
exportiere Standardklasse HelloWorld erweitert Vue {
  @Prop() private msg!: Zeichenfolge;
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich></Stil>

An diesem Punkt sind wir bereit, ein neues Kapitel zu beginnen TypeScript Quick Start und vue-property-decorator

3. Schnellstart mit TypeScript

3.1 Basistypen und erweiterte Typen

Typescript verwendet dieselben Grundtypen wie Javascript , verfügt jedoch über einige zusätzliche Typen.

• Tuple
• enum
• Any und Void

1. Grundlegende Typsammlung

// Zahlen, Binär-, Oktal- und Hexadezimalzahlen werden alle unterstützt. let decLiteral: number = 6;
lass hexLiteral: Zahl = 0xf00d;
 
// Zeichenfolge, einfache oder doppelte Anführungszeichen sind in Ordnung. let name: string = "bob";
let-Satz: string = „Hallo, mein Name ist ${ name }.“
 
// Array, die zweite Möglichkeit besteht darin, Array-Generika zu verwenden, Array<Elementtyp>:
Lass uns auflisten: Zahl[] = [1, 2, 3];
let-Liste: Array<Zahl> = [1, 2, 3];
 
lass u: undefiniert = undefiniert;
sei n: null = null;

2. Sondertypen

1. Tuple

Stellen Sie sich ein Tupel als organisiertes Array vor, bei dem Sie die Datentypen in der richtigen Reihenfolge vordefinieren müssen.

const messyArray = ['etwas', 2, wahr, undefiniert, null];
const tuple: [Zahl, Zeichenfolge, Zeichenfolge] = [24, "Indrek", "Lasn"]

Typescript warnt Sie, wenn Sie die Indizierungsregeln für die voreingestellte Reihenfolge der Tupel nicht befolgen.

(Das erste Element tuple sollte vom Typ number sein.)

2. enum

enum Enumerationstyp ist eine Ergänzung zu den JavaScript-Standarddatentypen. Wie in C# und anderen Sprachen können Aufzählungstypen verwendet werden, um einer Reihe von Werten benutzerfreundliche Namen zu geben.

// Standardmäßig beginnen die Elementnummern bei 0, Sie können aber auch manuell bei 1 beginnen. enum Color {Rot = 1, Grün = 2, Blau = 4}
sei c: Farbe = Farbe.Grün;
 
let Farbname: Zeichenfolge = Farbe[2];
console.log(colorName); // Gibt „Grün“ aus, da der Wert im obigen Code 2 ist

Ein weiteres gutes Beispiel ist die Verwendung von Enumerationen zum Speichern des Anwendungsstatus.

3. Void

In Typescript müssen Sie den Rückgabetyp in Ihrer Funktion definieren . So was:

Wenn kein Rückgabewert vorhanden ist, wird ein Fehler gemeldet:

Wir können den Rückgabewert als void definieren:

Sie können derzeit nicht return

4. Any

Ähm...jeder Typ ist in Ordnung. Sie können dies verwenden, wenn Sie nicht sicher sind, mit welchem ​​Typ Sie es zu tun haben.

Es muss jedoch mit Vorsicht verwendet werden, da ein übermäßiger Einsatz den Zweck der Verwendung von Ts zunichte macht.

let person: any = "Frontend-Abschreckungslehrer"
Person = 25
Person = wahr

Die wichtigsten Anwendungsszenarien sind:

• Zugriff auf Bibliotheken von Drittanbietern
• Ts-Noobs verwenden es im frühen Stadium

5. Never

Um es einfach auszudrücken: „ Never gibt es den Vater, den du nie haben wirst.“

Die spezifischen Verhaltensweisen sind:

• throw new Error(message)
• return error("Something failed")
• while (true) {} // 存在無法達到的終點

3. Typbehauptungen

Die kurze Definition lautet: Es kann verwendet werden, um den Typ eines Werts manuell anzugeben.

Es gibt zwei Möglichkeiten, es zu schreiben: mit spitzen Klammern und as :

let someValue: any = "Dies ist eine Zeichenfolge";
 
let strLength: Zahl = (<Zeichenfolge>einWert).Länge;
let strLength: Zahl = (ein Wert als Zeichenfolge).Länge;

Anwendungsbeispiele:

Wenn TypeScript sich über den Typ einer Variablen eines Union-Typs nicht sicher ist, können wir nur auf Eigenschaften oder Methoden zugreifen, die allen Typen des Union-Typs gemeinsam sind:

Funktion getLength(etwas: Zeichenfolge | Zahl): Zahl {
    gib etwas zurück.Länge;
}
 
// index.ts(2,22): Fehler TS2339: Eigenschaft „Länge“ existiert im Typ „Zeichenfolge | Zahl“ nicht.
// Die Eigenschaft „Länge“ existiert beim Typ „Zahl“ nicht.

Wenn Sie auf die Länge zugreifen, wird ein Fehler gemeldet. Manchmal müssen wir tatsächlich auf eine Eigenschaft oder Methode eines Typs zugreifen, wenn der Typ noch nicht bestimmt ist. In diesem Fall ist eine Behauptung erforderlich, um einen Fehler zu vermeiden:

Funktion getLength(etwas: Zeichenfolge | Zahl): Zahl {
    wenn ((<string>etwas).Länge) {
        return (<string>etwas).Länge;
    } anders {
        gib etwas zurück.toString().Länge;
    }
}

3.2 Generika

Ein wesentlicher Bestandteil der Softwareentwicklung ist das Erstellen von Komponenten. Die erstellten Komponenten müssen nicht nur klare Definitionen und einheitliche Schnittstellen aufweisen, sondern auch wiederverwendbar sein. Komponenten, die vorhandene und zukünftig hinzukommende Datentypen unterstützen, sorgen für große Flexibilität im Entwicklungsprozess großer Softwaresysteme.

In C# und Java können Sie „Generics“ verwenden, um wiederverwendbare Komponenten zu erstellen, die mehrere Datentypen unterstützen. Dies ermöglicht Benutzern, Komponenten entsprechend ihren eigenen Datentypen zu verwenden.

1. Generische Methoden

In TypeScript gibt es zwei Möglichkeiten, generische Methoden zu deklarieren :

Funktion gen_func1<T>(arg: T): T {
    Argument zurückgeben;
}
// oder let gen_func2: <T>(arg: T) => T = Funktion (arg) {
    Argument zurückgeben;
}

Es gibt auch zwei Möglichkeiten zum Anrufen :

gen_func1<string>('Hallo Welt');
gen_func2('Hallo Welt'); 
// Die zweite aufrufende Methode kann den Typparameter weglassen, da der Compiler den entsprechenden Typ automatisch anhand des übergebenen Parameters erkennt.

2. Generika und Any

Der spezielle Typ Any of Ts kann bei Verwendung jeden beliebigen Typ ersetzen. Auf den ersten Blick scheint es keinen Unterschied zwischen den beiden zu geben, aber tatsächlich:

// Methode 1: Methode mit beliebigem Parameter function any_func(arg: any): any {
    Konsole.log(Argumentlänge);
		Argument zurückgeben;
}
 
// Methode 2: Array generische Methode function array_func<T>(arg: Array<T>): Array<T> {
	  Konsole.log(Argumentlänge);
		Argument zurückgeben;
}

• Methode 1 druckt length des arg Parameters. Da any jeden beliebigen Typ ersetzen kann, löst diese Methode eine Ausnahme aus, wenn der übergebene Parameter kein Array oder Objekt mit length ist.
• Methode 2 definiert den Parametertyp als generischen Array -Typ, der definitiv length hat, sodass keine Ausnahme ausgelöst wird.

3. Generische Typen

Generische Schnittstelle:

Schnittstelle Generics_interface<T> {
    (Argument: T): T;
}
 
Funktion func_demo<T>(arg: T): T {
    Argument zurückgeben;
}
 
let func1: Generics_interface<Nummer> = func_demo;
func1(123); // Tatsächlicher Parameter vom richtigen Typ func1('123'); // Tatsächlicher Parameter vom falschen Typ

3.3 Benutzerdefinierte Typen: Schnittstelle vs. Typalias

Interface , in China in Schnittstelle übersetzt.

Type alias , geben Sie Alias ​​ein.

1. Ähnlichkeiten

Kann verwendet werden, um ein Objekt oder eine Funktion zu beschreiben:

Schnittstelle Benutzer {
  Name: Zeichenfolge
  Alter: Anzahl
}
 
Typ Benutzer = {
  Name: Zeichenfolge
  Alter: Anzahl
};
 
Schnittstelle SetUser {
  (Name: Zeichenfolge, Alter: Zahl): ungültig;
}
Typ SetUser = (Name: Zeichenfolge, Alter: Zahl): ungültig;

Beide erlauben Erweiterungen:

Sowohl interface als auch type können erweitert werden, und die beiden sind nicht unabhängig voneinander, d. h. interface kann extends type und type kann auch extends interface . Obwohl die Wirkung ähnlich ist, ist die Syntax beider unterschiedlich .

Schnittstelle erweitert Schnittstelle

Schnittstellenname { 
  Name: Zeichenfolge; 
}
Schnittstelle Benutzer erweitert Name { 
  Alter: Anzahl; 
}

Typ erweitert Typ

Typ Name = { 
  Name: Zeichenfolge; 
}
Typ Benutzer = Name & { Alter: Zahl };

Schnittstelle erweitert Typ

Typ Name = { 
  Name: Zeichenfolge; 
}
Schnittstelle Benutzer erweitert Name { 
  Alter: Anzahl; 
}

Typ erweitert Schnittstelle

Schnittstellenname { 
  Name: Zeichenfolge; 
}
Typ Benutzer = Name & { 
  Alter: Anzahl; 
}

2. Unterschiede

type ist OK, interface jedoch nicht.

type kann grundlegende Typaliase, Union-Typen, Tupel usw. deklarieren.

// Basistyp Aliastyp Name = Zeichenfolge
 
//Union-Typ-Schnittstelle Dog {
    wong();
}
Schnittstelle Cat {
    miao();
}
 
Typ Haustier = Hund | Katze
 
// Definieren Sie speziell den Typ jeder Position im Array-Typ PetList = [Dog, Pet]

In der type können Sie auch typeof verwenden, um den Typ der Instanz für die Zuweisung abzurufen.

// Wenn Sie den Typ einer Variablen ermitteln möchten, verwenden Sie typeof
let div = document.createElement('div');
Typ B = Typ von div

Andere Tricks

Typ StringOrNumber = Zeichenfolge | Zahl;  
Typ Text = Zeichenfolge | { Text: Zeichenfolge };  
Typ NameLookup = Wörterbuch<Zeichenfolge, Person>;  
Typ Callback<T> = (Daten: T) => void;  
Typ Paar<T> = [T, T];  
Typ Koordinaten = Paar<Zahl>;  
Typ Tree<T> = T | { links: Tree<T>, rechts: Tree<T> };

interface ist OK, aber type nicht

interface kann Zusammenführung deklarieren

Schnittstelle Benutzer {
  Name: Zeichenfolge
  Alter: Anzahl
}
 
Schnittstelle Benutzer {
  Geschlecht: Schnur
}
 
/*
Die Benutzeroberfläche ist {
  Name: Zeichenfolge
  Alter: Anzahl
  Geschlecht: Schnur 
}
*/

interface hat optionale Attribute und schreibgeschützte Attribute

Optionale Attribute

Nicht alle Attribute in einer Schnittstelle sind erforderlich. Manche existieren nur unter bestimmten Bedingungen oder überhaupt nicht. Beispielsweise werden nur einigen Eigenschaften des an die Funktion übergebenen Parameterobjekts Werte zugewiesen. Eine Schnittstelle mit optionalen Attributen ähnelt einer normalen Schnittstellendefinition, mit dem Unterschied, dass nach der Definition des optionalen Attributnamens ein ? -Symbol hinzugefügt wird. Wie unten gezeigt

Schnittstelle Person {
  Name: Zeichenfolge;
  Alter?: Zahl;
  Geschlecht?: Nummer;
}

Schreibgeschützte Eigenschaften

Wie der Name schon sagt, ist diese Eigenschaft nicht beschreibbar und der Wert einer Objekteigenschaft kann nur geändert werden, wenn das Objekt gerade erstellt wurde. Sie können eine schreibgeschützte Eigenschaft angeben, indem Sie vor dem Eigenschaftsnamen readonly verwenden, wie unten gezeigt:

Schnittstelle Benutzer {
    schreibgeschützter LoginName: Zeichenfolge;
    Passwort: Zeichenfolge;
}

Das obige Beispiel zeigt, dass der Anmeldename nach der Initialisierung des Benutzerobjekts nicht mehr geändert werden kann.

3.4 Implementierung und Vererbung: implementiert vs. erweitert

extends ist offensichtlich die Klassenvererbung in ES6. Was macht also „ implement “? Worin besteht der Unterschied zu extends ?

implement , implementieren. Ähnlich der grundlegenden Rolle von Schnittstellen in C# oder Java kann TypeScript sie auch verwenden, um eine Klasse explizit zur Einhaltung eines bestimmten Vertrags zu zwingen.

Grundlegende Verwendung des Geräts :

Schnittstelle IDeveloper {
   Name: Zeichenfolge;
   Alter?: Zahl;
}
// OK
Klasse dev implementiert IDeveloper {
    Name = "Alex";
    Alter = 20;
}
// OK
Klasse dev2 implementiert IDeveloper {
    Name = "Alex";
}
// Fehler
Klasse dev3 implementiert IDeveloper {
    Name = "Alex";
    Alter = '9';
}

Und extends erbt die übergeordnete Klasse, die beiden können tatsächlich austauschbar verwendet werden:

Klasse A erweitert B implementiert C,D,E

Die Verwendung von interface und type ist:

3.5 Deklarationsdateien und Namespaces: Deklaration und Namespace

Zuvor haben wir im Vue-Projekt über shims-tsx.d.ts und shims-vue.d.ts gesprochen. Der anfängliche Inhalt ist wie folgt:

// shims-tsx.d.ts
importiere Vue, { VNode } von „vue“;
 
global deklarieren {
  Namespace JSX {
    // tslint:Deaktiviere die Schnittstelle „no-empty“
    Schnittstellenelement erweitert VNode {}
    // tslint:Deaktiviere die Schnittstelle „no-empty“
    Schnittstelle ElementClass erweitert Vue {}
    Schnittstelle IntrinsicElements {
      [Element: Zeichenfolge]: beliebig;
    }
  }
}
 
// shims-vue.d.ts
Deklariere das Modul '*.vue' {
  importiere Vue von „vue“;
  Standard-Vue exportieren;
}

declare : Wenn wir eine Bibliothek eines Drittanbieters verwenden, müssen wir auf deren Deklarationsdatei verweisen, um die entsprechende Codevervollständigung, Schnittstellenaufforderungen und andere Funktionen zu erhalten.

Hier sind einige häufig verwendete:

declare var deklariert eine globale Variable
Die Funktion „declare“ deklariert eine globale Methode
declare class deklariert eine globale Klasse
declare enum deklariert einen globalen Aufzählungstyp
declare global erweitert globale Variablen
Modul deklarieren

namespace : „Interne Module“ werden jetzt „Namespaces“ genannt.

module X { Dies entspricht dem derzeit empfohlenen Syntax- namespace X { )

Zusammenarbeit mit anderen JS-Bibliotheken

Ähnlich wie bei Modulen können Sie auch Deklarationsdateien für .d.ts Dateien für andere JS-Bibliotheken erstellen, die Namespaces verwenden. Für die D3 -JS-Bibliothek können Sie beispielsweise eine Deklarationsdatei wie diese erstellen:

Namespace D3 deklarieren{
    Exportschnittstellen-Selektoren { ... }
}
Deklariere Variable d3: D3.Base;

Also die beiden Dateien oben:

• Der Batch shims-tsx.d.ts benennt mehrere interne Module in der globalen Variable global .
• shims-vue.d.ts bedeutet, TypeScript mitzuteilen, dass Dateien mit der Endung *.vue zur Verarbeitung an das vue Modul übergeben werden können.

3.6 Zugriffsmodifikatoren: privat, öffentlich, geschützt

Eigentlich ist es ganz einfach zu verstehen:

1. Standardmäßig ist public
2. Wenn ein Mitglied als private gekennzeichnet ist, kann nicht von außerhalb der Klasse darauf zugegriffen werden, in der es deklariert ist, zum Beispiel:

Klasse Tier {
    privater Name: Zeichenfolge;
    Konstruktor(derName: Zeichenfolge) {
        dieser.name = derName;
    }
}
 
let a = new Animal('Cat').name; // Fehler, 'name' ist privat

protected ist ähnlich zu private , aber auf protected Mitglieder kann in abgeleiteten Klassen zugegriffen werden.

Klasse Tier {
    geschützter Name: Zeichenfolge;
    Konstruktor(derName: Zeichenfolge) {
        dieser.name = derName;
    }
}
 
Klasse Rhino erweitert Animal {
    Konstruktor() {
        super('Rhino');
   }         
   getName() {
       console.log(this.name) //Der Name hier ist der Name in der Klasse Animal
   }
}

3.7 Optionale Parameter (?:) und der Nicht-Null-Assertion-Operator (!.)

Optionale Parameter

Funktion BuildName(Vorname: Zeichenfolge, Nachname?: Zeichenfolge) {
    returniere Vorname + ' ' + Nachname
}
 
// Fehlerdemonstration buildName("Vorname", "Nachname", "Nachname")
// Korrekte Darstellung von buildName("firstName")
// Korrekte Darstellung von buildName("firstName", "lastName")

Nicht-Null-Assertion-Operator:

Verwenden Sie es, wenn Sie sicher sein können, dass der Variablenwert definitiv nicht leer ist.

Im Gegensatz zu optionalen Parametern schützt der Assertion-Operator ungleich NULL nicht vor Null oder „undefiniert“.

let s = e!.name; // behaupte, dass e ungleich null ist und greife auf die Eigenschaft name zu

expandieren

1. Verwendung in Attributen oder Parametern? : Gibt an, dass das Attribut oder der Parameter optional ist

2. Verwenden Sie ! in Attributen oder Parametern. : Zeigt erzwungenes Parsen an (teilt dem Typescript-Compiler mit, dass hier ein Wert vorhanden sein muss), wird häufig in @Prop im Vue-Decorator verwendet

3. Nach Variable verwenden! : Gibt an, dass die Typinferenz null und undefined ausschließt.

4. Ts-Schreiben von Vue-Komponenten

Seit vue2.5 bietet vue eine bessere Unterstützung für ts. Laut der offiziellen Dokumentation gibt es zwei Möglichkeiten, Vue in Kombination mit TypeScript zu schreiben:

Vue.erweitern

 Vue von „vue“ importieren
 
  const Komponente = Vue.extend({
  	// Typinferenz aktiviert
  })

Vue-Klassenkomponente

importiere { Komponente, Vue, Prop } von 'vue-property-decorator'
 
@Komponente
exportiere Standardklasse Test erweitert Vue {
  @Prop({ Typ: Objekt })
  privater Test: {Wert: Zeichenfolge}

Im Idealfall ist die Art und Weise, Vue.extend zu schreiben, am einfachsten zu erlernen. Basierend auf der bestehenden Schreibmethode ist die Migration nahezu kostenfrei.

Der Vue.extend -Modus muss jedoch in Kombination mit mixins verwendet werden. In Mixins definierte Methoden werden von Typescript nicht erkannt

, was bedeutet, dass es zu Problemen wie fehlenden Codehinweisen, Typprüfungen und Kompilierungsfehlern kommen wird.

Nur Neulinge treffen Entscheidungen, die Großen suchen sich die Besten aus. Kommen wir direkt zum Zweiten:

4.1 Vue-Klassenkomponente

Gehen wir zurück zu src/components/HelloWorld.vue

<Vorlage>
  <div Klasse="hallo">
    <h1>{{ msg }}</h1>
    <!-- ausgelassen-->
  </div>
</Vorlage>
 
<script lang="ts">
importiere { Komponente, Prop, Vue } von „vue-property-decorator“;
 
@Komponente
exportiere Standardklasse HelloWorld erweitert Vue {
  @Prop() private msg!: Zeichenfolge;
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich></Stil>

Studenten, die bereits python geschrieben haben, dürfte es vertraut vorkommen:

vue-property-decorator eine offiziell unterstützte Bibliothek, stellt die Funktionsdekorator-Syntax bereit

1. Funktionsmodifikator @

„@“ ist eher ein Verweis oder Aufruf der Funktion, die es ändert, als eine Funktionsänderung.

Oder um es im Klartext zu sagen: @ : "Folgendes ist von mir umgeben."

Der folgende Code hat beispielsweise zwei Funktionen, die nicht aufgerufen werden, aber ebenfalls Ausgabeergebnisse erzeugen:

test(f){
    console.log("vor ...");
    F()
		console.log("nach …");
 }
 
@prüfen
Funktion(){
	console.log("Funktion wurde aufgerufen");
}

Direkt ausführen und das Ergebnis ausgeben:

vor ...
func wurde aufgerufen
nach ...

Aus dem obigen Code können wir Folgendes ersehen:

• Es sind nur zwei Funktionen definiert: test und func , aber sie werden nicht aufgerufen.
• Ohne @test sollte der Lauf keine Ausgabe erzeugen.

Wenn der Interpreter jedoch den Funktionsmodifikator „@“ liest, sind die folgenden Schritte erforderlich:

1. Um die test aufzurufen, ist der Einstiegsparameter test die Funktion mit dem Namen " func ";
2. test wird ausgeführt und der Eingabeparameter (d. h. func ) wird aufgerufen (ausgeführt).

Mit anderen Worten, der Eingabeparameter der Funktion mit dem Modifikator ist die gesamte darunter liegende Funktion. Es ist function a (function () { ... }); in JavaScrip etwas ähnlich.

2. Dekoratoren bereitgestellt von vue-property-decorator und vuex-class

Dekorator von vue-property-decorator :

• @Stütze
• @PropSync
• @Bieten
• @Modell
• @Betrachten
• @Injizieren
• @Bieten
• @Emittieren
• @Component (bereitgestellt von vue-class-component)
• Mixins (die von der Vue-Class-Komponente bereitgestellte Hilfsfunktion mit dem Namen „Mixins“)

Dekorator vuex-class :

• @Zustand
• @Getter
• @Aktion
• @Mutation

Werfen wir einen Blick auf die ursprüngliche Vue-Komponentenvorlage:

importiere {KomponenteA,KomponenteB} aus '@/Komponenten';
 
Standard exportieren {
	Komponenten: { KomponenteA, KomponenteB},
	Requisiten: {
    propA: { Typ: Zahl },
    propB: { default: 'Standardwert' },
    propC: { Typ: [String, Boolean] },
  }
  // Komponentendaten data () {
    zurückkehren {
      Nachricht: 'Hallo'
    }
  },
  // Berechnete Eigenschaften berechnet: {
    umgekehrteNachricht () {
      gib diese.Nachricht.Split('').Reverse().Join('') zurück
    }
    // Vuex-Daten step() {
    	gib dies zurück.$store.state.count
    }
  },
  Methoden: {
    Nachricht ändern () {
      this.message = "Auf Wiedersehen"
    },
    getName() {
    	lass name = dies.$store.getters['person/name']
    	Rückgabename
    }
  },
  // Lebenszyklus erstellt () { },
  montiert () { },
  aktualisiert () { },
  zerstört () { }
}

Die obige Vorlage wird durch die folgende Schreibregel für Modifikatoren ersetzt:

importiere { Komponente, Vue, Prop } von „vue-property-decorator“;
importiere { Status, Getter } von „vuex-Klasse“;
importiere {Anzahl, Name} von '@/Person'
importiere { KomponenteA, KomponenteB } aus '@/Komponenten';
 
@Komponente({
    Komponenten: { KomponenteA, KomponenteB},
})
exportiere Standardklasse HelloWorld erweitert Vue{
	@Prop(Number) schreibgeschützt propA!: Zahl | undefiniert
    @Prop({ default: 'Standardwert' }) schreibgeschützte propB!: Zeichenfolge
    @Prop([String, Boolean]) schreibgeschützt propC!: Zeichenfolge | Boolean | undefiniert
  
  // Originaldaten
  Nachricht = "Hallo"
  
  // Berechnete private Eigenschaften erhalten reversedMessage (): string[] {
  	gib diese.Nachricht.Split('').Reverse().Join('') zurück
  }
  // Vuex-Daten @State((state: IRootState) => state . booking. currentStep) Schritt!: Nummer
	@Getter( 'Person/Name') Name!: Name
  
  // Methode
  öffentliche changeMessage (): void {
    this.message = 'Auf Wiedersehen'
  },
  öffentliche getName(): Zeichenfolge {
    let storeName = Name
    Rückgabe des StoreName
  }
	// Lebenszyklus privat erstellt (): void { },
  privat gemountet (): void { },
  privat aktualisiert (): void { },
  privat zerstört(): void { }
}

Wie Sie sehen, fügen wir der Lebenszyklusliste private XXXX -Methoden hinzu, da diese nicht anderen Komponenten zugänglich gemacht werden sollten.

Der Grund dafür, keine privaten Einschränkungen für method vorzunehmen, besteht darin, dass @Emit verwendet werden kann, um Informationen an die übergeordnete Komponente zu übergeben.

4.2 Globale Tools hinzufügen

Um globale Module einzuführen, müssen Sie main.ts ändern:

importiere Vue von „vue“;
App aus „./App.vue“ importieren;
Router aus „./router“ importieren;
Store aus „./store“ importieren;
 
Vue.config.productionTip = falsch;
 
neuer Vue({
  Router,
  speichern,
  rendern: (h) => h(App),
}).$mount('#app');

npm i VueI18n

importiere Vue von „vue“;
App aus „./App.vue“ importieren;
Router aus „./router“ importieren;
Store aus „./store“ importieren;
// Neues Modul importiere i18n von './i18n';
 
Vue.config.productionTip = falsch;
 
neuer Vue({
    Router, 
    speichern, 
    i18n, // Neues Modul rendern: (h) => h(App),
}).$mount('#app');

Doch das allein reicht nicht. Sie müssen src/vue-shim.d.ts verschieben:

//Globale Methode deklarieren declare module 'vue/types/vue' {
  Schnittstelle Vue {
        schreibgeschützt $i18n: VueI18Next;
        $t: Übersetzungsfunktion;
    }
}

Wenn Sie this.$i18n() später verwenden, wird kein Fehler gemeldet.

4.3 Axios-Nutzung und Verpackung

Axios -Verpackungen haben für verschiedene Menschen unterschiedliche Einsatzmöglichkeiten

Wenn Sie nur die Verwendung von Axios in TS ausprobieren möchten, können Sie vue-axios installieren , um Axios zu verwenden

$ npm ich axios vue-axios

main.ts hinzufügen:

Vue von „vue“ importieren
Axios von „Axios“ importieren
Importieren Sie VueAxios von „vue-axios“.
 
Vue.use(VueAxios, axios)

Verwenden Sie es dann in der Komponente:

Vue.axios.get(api).then((Antwort) => {
  Konsole.log(Antwort.Daten)
})
 
dies.axios.get(api).then((Antwort) => {
  Konsole.log(Antwort.Daten)
})
 
dies.$http.get(api).then((Antwort) => {
  Konsole.log(Antwort.Daten)
})

1. Erstellen Sie eine neue Datei request.ts

Dateiverzeichnis:

-API
    - main.ts //Eigentlich -utils aufrufen
    - request.ts // Schnittstellenkapselung

2. Analyse der Datei request.ts

importiere * als Axios von „Axios“;
Store aus „@/store“ importieren;
// Dies kann entsprechend der verwendeten spezifischen UI-Komponentenbibliothek ersetzt werden. import { Toast } from 'vant';
importiere { AxiosResponse, AxiosRequestConfig } von „axios“;
 
 /* baseURL wird entsprechend dem aktuellen Projekt definiert*/
const baseURL = Prozess.Umgebung.VUE_APP_URL;
 
 /* Eine Axios-Instanz erstellen */
const service = axios.default.create({
    Basis-URL,
    timeout: 0, // Anforderungs-Timeout maxContentLength: 4000,
});
 
service.interceptors.request.use((Konfiguration: AxiosRequestConfig) => {
    Konfiguration zurückgeben;
}, (Fehler: beliebig) => {
    Versprechen.Ablehnen(Fehler);
});
 
Dienst.Interceptors.Antwort.Verwendung(
    (Antwort: AxiosResponse) => {
        wenn (Antwort.Status !== 200) {
            Toast.fail('Anforderungsfehler!');
        } anders {
            Antwortdaten zurückgeben;
        }
    },
    (Fehler: beliebig) => {
        returniere Promise.reject(Fehler);
    });
    
Standarddienst exportieren;

Der Einfachheit halber müssen wir auch ein festes Format definieren, das von Axios zurückgegeben wird, und ein neues ajax.ts erstellen:

Schnittstelle AjaxResponse exportieren {
    Kennziffer;
    Daten: beliebig;
    Nachricht: Zeichenfolge;
}

3. Aufruf main.ts Schnittstelle:

// api/main.ts
Importiere die Anfrage von „../utils/request“;
 
// erhalten
Exportfunktion getSomeThings(params:any) {
    Rückgabeanforderung({
        URL: „/api/getSomethings“,
    });
}
 
// Post
Exportfunktion postSomeThings(params:any) {
    Rückgabeanforderung({
        URL: '/api/postSomethings',
        Methoden: 'post',
        Daten:Parameter
    });
}

5. Schreiben Sie eine Komponente

Um Zeit zu sparen, ersetzen wir src/components/HelloWorld.vue durch eine Blog-Post-Komponente:

<Vorlage>
	<div Klasse="Blogbeitrag">
		<h2>{{ post.title }}</h2>
		<p>{{ Beitrag.Body }}</p>
		<p class="meta">Geschrieben von {{ post.author }} am {{ date }}</p>
	</div>
</Vorlage>
 
<script lang="ts">
importiere { Komponente, Prop, Vue } von „vue-property-decorator“;
 
// Geben Sie hier die Daten ein, um die Schnittstelle „Export Post“ zu beschränken {
	Titel: Zeichenfolge;
	Körper: Zeichenfolge;
	Autor: Zeichenfolge;
	datePosted: Datum;
}
 
@Komponente
exportiere Standardklasse HelloWorld erweitert Vue {
	@Prop() privater Beitrag!: Beitrag;
 
	Datum abrufen() {
		gibt `${this.post.datePosted.getDate()}/${this.post.datePosted.getMonth()}/${this.post.datePosted.getFullYear()}` zurück;
	}
}
</Skript>
 
<Stilbereich>
h2 {
  Textdekoration: Unterstreichen;
}
p.meta {
  Schriftstil: kursiv;
}
</Stil>

Dann verwenden Sie es in Home.vue :

<Vorlage>
  <div Klasse="Startseite">
    <img alt="Vue-Logo" src="../assets/logo.png">
   	<HalloWelt v-for="blogBeitrag in blogBeiträge" :post="blogBeitrag" :key="blogBeitrag.title" />
  </div>
</Vorlage>
 
<script lang="ts">
importiere { Komponente, Vue } von „vue-property-decorator“;
importiere HelloWorld, { Post } von '@/components/HelloWorld.vue'; // @ ist ein Alias ​​für /src
 
@Komponente({
  Komponenten:
    Hallo Welt,
  },
})
exportiere Standardklasse Home erweitert Vue {
    private Blogbeiträge: Beitrag[] = [
        {
          Titel: „Mein allererster Blogbeitrag!“,
          Text: „Lorem ipsum dolor sit amet.“
          Autorin: 'Elke',
          datePosted: neues Datum (2019, 1, 18),
        },
        {
          Titel: „Schau, ich blogge!“,
          body: ‚Hurra, das ist mein zweiter Beitrag!‘,
          Autorin: 'Elke',
          datePosted: neues Datum (2019, 1, 19),
        },
        {
          Titel: 'Noch einer?!',
          body: 'Noch einer!',
          Autorin: 'Elke',
          datePosted: neues Datum (2019, 1, 20),
        },
      ];
}
</Skript>

Führen Sie nun das Projekt aus:

Dies ist eine einfache Eltern-Kind-Komponente.

Was den Rückzug der Class API betrifft, ist dies eigentlich recht komfortabel. Es ist wirklich seltsam, class zum Schreiben Vue Komponenten zu verwenden. (Daher beschreibt dieser Artikel zur Einführung in Ts Class API überhaupt nicht.)

Oben finden Sie den detaillierten Inhalt der Schnellstartübung für TypeScript, den neuen Partner von Vue. Weitere Informationen zum Schnellstart von TypeScript für Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!