TypeScript-Verbesserungen in Vue 2.5

Typverbesserungen

Seit der Veröffentlichung von Vue 2.0 erhalten wir Anfragen nach einer besseren TypeScript-Integration. Seitdem haben wir offizielle TypeScript-Typdeklarationen für die meisten Kernbibliotheken hinzugefügt (vue, vue-router, vuex). Bei Verwendung der sofort einsatzbereiten Vue-API fehlt jedoch die aktuelle Integration. Beispiel: TypeScript kann die this-Typen in der von Vue verwendeten standardmäßigen objektbasierten API nicht einfach ableiten. Damit unser Vue-Code besser mit TypeScript funktioniert, müssen wir den vue-class-component decorator verwenden, der es uns ermöglicht, Vue-Komponenten mit klassenbasierter Syntax zu schreiben.

Für Benutzer, die klassenbasierte APIs bevorzugen, mag das gut genug sein, aber es ist ein bisschen schlecht, dass Benutzer nur zur Typbestimmung eine andere API verwenden müssen. Dies macht auch die Migration vorhandener Vue-Codebasen zu TypeScript schwieriger.

Anfang dieses Jahres hat TypeScript einige neue Funktionen eingeführt, die es TypeScript ermöglichen, objektliteralbasierte APIs besser zu verstehen, was es auch einfacher macht, die Typdeklarationen von Vue zu verbessern. Daniel Rosenwasser vom TypeScript-Team startete eine ehrgeizige PR (die jetzt vom Kernteammitglied Herrington Darkholme geleitet wird), die nach der Zusammenführung Folgendes bieten wird:

• bei Verwendung der Standard-Vue-API Korrekte Typinferenz für this. Dies funktioniert auch hervorragend in Einzeldateikomponenten!

• Typinferenz von props basierend auf der this-Konfiguration der Komponente. props

• Darüber hinaus

  kommen diese Verbesserungen auch reinen JavaScript-Benutzern zugute! Wenn Sie VSCode mit der fantastischen Vetur-Erweiterung verwenden, werden Sie erhebliche Verbesserungen bei den Hinweisen zur automatischen Vervollständigung und sogar bei den Tipphinweisen feststellen, wenn Sie reines JavaScript in Vue-Komponenten verwenden! Dies liegt daran, dass vue-Language-Server, das interne Paket, das Vue-Komponenten analysiert, den TypeScript-Compiler nutzen kann, um weitere Informationen über Ihren Code zu extrahieren. Darüber hinaus kann jeder Editor, der das Sprachdienstprotokoll unterstützt, Vue-Language-Server verwenden, um ähnliche Funktionen bereitzustellen.

Ausführen von VSCode + Vetur + neuer Typdeklaration

Wenn Sie interessiert sind, klonen Sie dieses Erlebnisprojekt (stellen Sie sicher, dass es sich um den Zweig

handelt) und öffnen Sie es mit VSCode + Vetur, um es auszuprobieren. new-types

Vorgänge, die TypeScript-Benutzer möglicherweise benötigen

Typverbesserungen werden in vue 2.5 implementiert, dessen Veröffentlichung derzeit für etwa Anfang Oktober geplant ist. Wir veröffentlichen eine Nebenversion, da es noch keine wichtigen Änderungen an der öffentlichen JavaScript-API gibt. Das Upgrade erfordert jedoch möglicherweise einige Maßnahmen für bestehende Vue+TypeScript-Benutzer. Deshalb geben wir die Änderungen jetzt bekannt, damit Sie genügend Zeit haben, Ihr Upgrade zu planen.

• Neue Typen erfordern mindestens Version 2.4 von TypeScript. Es wird empfohlen, mit Vue2.5 auf die neueste TypeScript-Version zu aktualisieren. Vor

• haben wir empfohlen,

  in tsconfig.json so zu konfigurieren, dass die Importsyntax im ES-Stil ("allowSyntheticDefaultImports": true) verwendet wird. Neue Typen werden offiziell in die Import-/Exportsyntax im ES-Stil konvertiert, sodass die obige Konfiguration nicht erforderlich ist und Benutzer in allen Fällen Importe im ES-Stil verwenden müssen. import Vue from 'vue'

• Um mit den Änderungen in der Syntax fertig zu werden, werden die folgenden Bibliotheken, die von Vue-Kerntypen abhängen, größere Versionsaktualisierungen erhalten und müssen mit Vue2.5 aktualisiert werden:

  , vuex, vue-router, vuex-router-sync. vue-class-component

• Jetzt müssen Benutzer beim Hinzufügen eines benutzerdefinierten Moduls

  anstelle von interface VueConstructor (Differenzvergleich) verwenden. namespace Vue

• Wenn Sie Verwenden Sie

  , um Ihre Komponentenkonfiguration mit Anmerkungen zu versehen. Typen wie as ComponentOptions<something>, computed, watch und Lebenszyklus-Hooks erfordern eine manuelle Typanmerkung. render

Wir versuchen unser Bestes, um die Upgrade-Kosten zu senken und diese Art von Verbesserungen mit der in

verwendeten klassenbasierten API kompatibel zu machen. Für die überwiegende Mehrheit der Benutzer müssen Sie nur die Abhängigkeiten aktualisieren und auf den Import im ES-Stil umsteigen. Gleichzeitig empfehlen wir Ihnen, Ihre Vue-Version unter vue-class-component zu sperren, bis Sie zum Upgrade bereit sind. 2.4.x

Blueprint: TypeScript-Typunterstützung in vue-cli

Nach Version 2.5 planen wir, die offizielle TypeScript-Unterstützung in der nächsten vue-cli-Version einzuführen, damit TS+Vue-Benutzer problemlos eine neue Version starten können Projekt. Bleiben Sie dran!

Für Nicht-TypeScript-Benutzer

Diese Änderungen werden keine negativen Auswirkungen auf Nicht-TypeScript-Benutzer haben; soweit es die öffentliche JavaScript-API betrifft, wird 2.5 vollständig abwärtskompatibel sein und TypeScript Die CLI-Integration ist ebenfalls völlig optional. Sex-Joins. Aber wie gerade erwähnt, erhalten Sie bessere Eingabeaufforderungen zur automatischen Vervollständigung, wenn Sie die Editor-Erweiterung vue-Language-Server verwenden.

Das obige ist der detaillierte Inhalt vonTypeScript-Verbesserungen in Vue 2.5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!