So verwenden Sie TypeScript in Vue

Einführung

In den letzten Jahren wurde der Ruf nach TypeScript immer lauter und Typescript ist zu einer notwendigen Fähigkeit für das Front-End geworden. TypeScript ist eine Obermenge von JS-Typen und unterstützt Funktionen wie Generika, Typen, Namespaces, Aufzählungen usw., wodurch die Mängel von JS bei der Entwicklung groß angelegter Anwendungen ausgeglichen werden.

Wenn Sie TypeScript allein lernen, werden Sie feststellen, dass viele Konzepte relativ leicht zu verstehen sind, aber es gibt immer noch viele Fallstricke, wenn Sie es in Kombination mit einigen Frameworks verwenden. Wenn Sie beispielsweise Frameworks wie React und Vue verwenden, wird die Kombination mit TypeScript zu einem großen Hindernis. Sie müssen die Definitionen einiger komplexer Typen in den vom Framework bereitgestellten .d.ts-Deklarationsdateien und die Schreibmethoden von Komponenten usw. überprüfen und erhebliche Anpassungen vornehmen.

In diesem Artikel bündele ich hauptsächlich meine Erfahrungen, um Ihnen zu erklären, wie Sie in Vue reibungslos von js zu ts wechseln können. Es wird empfohlen, beim Lesen dieses Artikels über ein gewisses Verständnis von TypeScript zu verfügen, da in diesem Artikel einige grundlegende Kenntnisse von TypeScript nicht zu ausführlich erläutert werden. (Einzelheiten finden Sie im offiziellen Dokument https://www.w3cschool.cn/typescript/typescript-tutorial.html . Das offizielle Dokument ist das beste Einführungshandbuch.)

Bauen

Installation durch das offizielle Gerüst

# 1. Wenn Vue CLI nicht installiert ist, installieren Sie es zuerst npm install --global @vue/cli

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

Führen Sie einfach vue create my-app .

Sie werden dann in der Befehlszeile aufgefordert, eine Voreinstellung auszuwählen. Verwenden Sie die Pfeiltasten, um „Funktionen manuell auswählen“ auszuwählen.

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

Konfigurieren Sie dann die restlichen Einstellungen wie unten gezeigt:

Sobald die Einrichtung abgeschlossen ist, beginnt vue cli mit der Installation von Abhängigkeiten und der Einrichtung des Projekts.

Verzeichnisauflösung

Öffnen Sie nach Abschluss der Installation das Projekt und Sie werden feststellen, dass die Projektverzeichnisstruktur nach der Integration von ts folgendermaßen aussieht:

|-- ts-vue
    |-- .browserslistrc # Browserslistrc-Konfigurationsdatei (zur Unterstützung von Autoprefixer)
    |-- .eslintrc.js # eslint-Konfiguration |-- .gitignore
    |-- babel.config.js # Babel-Loader-Konfiguration |-- package-lock.json
    |-- package.json # package.json-Abhängigkeiten|-- postcss.config.js # PostCSS-Konfiguration|-- README.md
    |-- tsconfig.json # Typescript-Konfiguration |-- vue.config.js # Vue-CLI-Konfiguration |-- public # statische Ressourcen (werden direkt kopiert)
    | |-- favicon.ico # Favicon-Symbol| |-- index.html # HTML-Vorlage|-- src
    | |-- App.vue # Einstiegsseite| |-- main.ts # Einstiegsdatei, Laden der Komponente, Initialisierung usw.| |-- shims-tsx.d.ts
    | |-- shims-vue.d.ts
    | |-- Assets # Designschriftarten und andere statische Ressourcen (geladen von Webpack)
    | |-- Komponenten # Globale Komponenten| |-- Router # Routing| |-- Store # Globaler Vuex-Store
    | |-- Stile # Globale Stile| |-- Ansichten # Alle Seiten|-- Tests # Tests

Tatsächlich gibt es grob gesagt keinen großen Unterschied zum Projektverzeichnis, das zuvor mit js erstellt wurde. Der Hauptunterschied besteht darin, dass das Suffix von js jetzt in ts geändert wurde und es mehr Dateien wie tsconfig.json , shims-tsx.d.ts und shims-vue.d.ts gibt. Wofür sind diese Dateien:

• tsconfig.json : Typescript-Konfigurationsdatei, die hauptsächlich verwendet wird, um zu kompilierende Dateien anzugeben und Kompilierungsoptionen zu definieren
• 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 standardmäßig nicht das Importieren von Vue-Dateien.

verwenden

Bevor wir beginnen, schauen wir uns einige sehr nützliche Bibliotheken für die Verwendung von Typescript in Vue an

vue-class-component : vue-class-component ist ein Klassendekorator, also ein Klassendekorator

vue-property-decorator : vue-property-decorator ist eine Erweiterung der vue-class-component in der Vue-Organisation

importiere { Vue, Komponente, Injizieren, Bereitstellen, Prop, Modell, Beobachten, Emittieren, Mixins } von 'vue-property-decorator'

vuex-module-decorators : Eine sehr nützliche Bibliothek zum Schreiben von Vuex mit Typescript

importiere { Modul, VuexModul, Mutation, Aktion, MutationAction, getModul } von 'vuex-module-decorators'

Komponentendeklaration

So erstellen Sie eine Komponente

importiere { Komponente, Prop, Vue, Watch } von „vue-property-decorator“;

@Komponente
exportiere Standardklasse Test erweitert Vue {

}

Datenobjekt

importiere { Komponente, Prop, Vue, Watch } von „vue-property-decorator“;

@Komponente
exportiere Standardklasse Test erweitert Vue {
  privater Name: Zeichenfolge;
}

Prop-Deklaration

@Prop({ Standard: false }) private istCollapse!: boolesch;
@Prop({ Standard: true }) private istErstesLevel!: boolean;
@Prop({ Standard: "" }) privater Basispfad!: Zeichenfolge;

!: bedeutet, dass es vorhanden sein muss, ?: bedeutet, dass es möglicherweise nicht vorhanden ist. Diese beiden werden grammatikalisch Zuweisungsbehauptungen genannt

@Prop(Optionen: (PropOptions | Konstruktor[] | Konstruktor) = {})

• PropOptions, Sie können die folgenden Optionen verwenden: Typ, Standard, erforderlich, Validator
• Konstruktor[], gibt den optionalen Typ der Stütze an
• Konstruktor, wie String, Number, Boolean usw., gibt den Typ der Eigenschaft an

Verfahren

In js muss die Methode im Methodenobjekt deklariert werden, das nun wie folgt aussieht

öffentliche Klickfunktion(): void {
  console.log(dieser.Name)
  console.log(diese.msg)
}

Überwachungseigenschaften überwachen

@Watch("$route", { unmittelbar: true })
private beiRoutenänderung(route: Route) {
  const query = route.query als Dictionary<string>;
  wenn (Abfrage) {
  diese.Umleitung = Abfrage.Umleitung;
  diese.andereQuery = diese.getOtherQuery(Abfrage);
  }
}

@Watch(Pfad: Zeichenfolge, Optionen: WatchOptions = {})

options enthält zwei Eigenschaften: immediate?:boolean: ob die Callback-Funktion sofort nach dem Start des Abhörens aufgerufen werden soll / deep?:boolean: ob die Callback-Funktion aufgerufen werden soll, wenn die Eigenschaft des überwachten Objekts geändert wird

@Watch('arr', { unmittelbar: wahr, tief: wahr })
beiAnfangGeändert(neuerWert: Zahl[], alterWert: Zahl[]) {}

berechnet

öffentlich erhalten alle Namen () {
  gibt 'berechnet ' + diesen.Namen zurück;
}

allname ist der berechnete Wert, name ist der überwachte Wert

Lebenszyklusfunktionen

öffentlich erstellt(): void {
  console.log('erstellt');
}

öffentlich gemountet():void{
  console.log('eingebunden')
}

Ereignisse ausgeben

importiere { Vue, Komponente, Emit } von 'vue-property-decorator'
@Komponente
exportiere Standardklasse MyComponent erweitert Vue {
  Anzahl = 0
  @Emittieren()
  addToCount(n: Zahl) {
      dies.Anzahl += n
  }
  @Emit('zurücksetzen')
  Anzahl zurücksetzen() {
      diese.Anzahl = 0
  }
  @Emittieren()
  Rückgabewert() {
      Rückkehr 10
  }
  @Emittieren()
  beiEingabeÄnderung(e) {
      returniere e.Ziel.Wert
  }
  @Emittieren()
  versprechen() {
      gib ein neues Versprechen zurück (Auflösen => {
      setzeTimeout(() => {
          Entschlossenheit(20)
      }, 0)
      })
  }
}

Verwenden Sie js-Schreiben

Standard exportieren {
  Daten() {
      zurückkehren {
      Anzahl: 0
      }
  },
  Methoden: {
      HinzufügenZähler(n) {
      dies.Anzahl += n
      dies.$emit('zum Zähler hinzufügen', n)
      },
      Anzahl zurücksetzen() {
      diese.Anzahl = 0
      dies.$emit('zurücksetzen')
      },
      Rückgabewert() {
      dies.$emit('Rückgabewert', 10)
      },
      beiEingabeÄnderung(e) {
      dies.$emit('bei Eingabeänderung', e.Zielwert, e)
      },
      versprechen() {
      const Versprechen = neues Versprechen(lösen => {
          setzeTimeout(() => {
          Entschlossenheit(20)
          }, 0)
      })
      versprechen.dann(Wert => {
          dies.$emit('Versprechen', Wert)
      })
      }
  }
 }

• @Emit(Ereignis?: Zeichenfolge)
• Der @Emit-Dekorator akzeptiert einen optionalen Parameter, der das erste Argument für $Emit ist und als Ereignisname dient. Wenn dieser Parameter nicht angegeben wird, konvertiert $Emit den Namen der Rückruffunktion von CamelCase in Kebab-Case und verwendet diesen als Ereignisnamen.
• @Emit nimmt den Rückgabewert der Callback-Funktion als zweiten Parameter. Wenn der Rückgabewert ein Promise-Objekt ist, wird $emit ausgelöst, nachdem das Promise-Objekt als aufgelöst markiert wurde.
• Die Parameter der Callback-Funktion von @Emit werden nach dem Rückgabewert platziert und von $emit gemeinsam als Parameter verwendet.

vuex

Bevor wir den Ladendekorateur verwenden, schauen wir uns die traditionelle Ladennutzung an.

Standard exportieren {
    Namespace: wahr,
    Zustand:{
        foo:""
    },
    Getter: {
        getFoo(Zustand) { return Zustand.foo}
    },
    Mutationen:
        setFooSync(Status, Nutzlast){
            state.foo = Nutzlast
        }
    },
    Aktionen: {
        setFoo({commit},Nutzlast){
            commot("getFoo",Nutzlast)
        }
    }
}

Beginnen Sie dann mit der Verwendung vuex-module-decorators

importieren {
  VuexModul,
  Mutation,
  Aktion,
  getModule,
  Modul
} von „vuex-module-decorators“;

VuexModule für grundlegende Eigenschaften

exportiere Standardklasse TestModule erweitert VuexModule { }

VuexModule bietet einige grundlegende Eigenschaften, darunter Namespaces, Status, Getter, Module, Mutationen, Aktionen, Kontext

@Module markiert das aktuelle Modul

@Module({ dynamisch: true, speichern, Name: "Einstellungen" })
Klasse Settings erweitert VuexModule implementiert ISettingsState {

}

Das Modul selbst hat mehrere konfigurierbare Eigenschaften:

• namespaced:boolean Untermodul aktivieren/deaktivieren
• stateFactory:Boolescher Zustand der Fabrik
• dynamic:boolean Nachdem der Store erstellt wurde, wird es dem Store hinzugefügt. Nach dem Einschalten der Dynamik müssen folgende Eigenschaften angegeben werden
• Name: Zeichenfolge gibt den Modulnamen an
• Store: Die Vuex.Store-Entität stellt den anfänglichen Store bereit

@Mutation wird als Mutation annotiert

@Mutation
private SET_NAME(Name: Zeichenfolge) {
// Benutzernamen festlegen this.name = name;
}

@Action wird als Aktion annotiert.

@Aktion
öffentliche asynchrone Anmeldung(Benutzerinfo: {Benutzername: Zeichenfolge;Passwort: Zeichenfolge}) {
  // Schnittstelle anmelden und Token erhalten
  let { Benutzername, Passwort } = Benutzerinfo;
  Benutzername = Benutzername.trim();
  const { data } = warte auf Login({ Benutzername, Passwort });
  setToken(Daten.Zugriffstoken);
  dies.SET_TOKEN(Daten.Zugriffstoken);
}

getModule ruft einen typsicheren Speicher ab. Das Modul muss ein Namensattribut bereitstellen.

exportiere const UserModule = getModule(Benutzer);

Dies ist das Ende dieses Artikels zur Verwendung von TypeScript in Vue. Weitere Informationen zur Verwendung von TypeScript in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!