So verwenden Sie die Typerweiterung ohne Typingscript

Vorwort

Aufgrund der schwachen Typisierung von JS, lockerer Schreibstandards und schwacher Unterstützung durch Entwicklungstools wissen wir bei der Pflege des Codes von Vorgängern oft nicht, woher eine Methode oder ein Feldname stammt. Wir müssen global suchen und dann langsam screenen, um es zu finden.

Ähnlich verhält es sich, wenn wir die von der Schnittstelle zurückgegebenen Objektfelder verwenden, deren Typ und Bedeutung wir jedoch nicht kennen.

Selbst wenn wir Methoden verwenden, die auf dem globalen Vue-Objekt gemountet sind, handelt es sich um reines Raten, insbesondere wenn die Funktion mehrere Typen empfangen kann, was mühsam ist.

Lassen Sie uns zunächst über den Zweck sprechen: Wir hoffen, dass alle Ressourcen mit Codevervollständigung zu ihren Definitionen oder Quellen indiziert werden können und durch Drücken von STRG+linke Maustaste in vscode dorthin navigiert werden kann, was die Effizienz verbessert und die Verwendung erleichtert.

Spezifische Konfigurationsinformationen

Konfigurieren Sie global jsconfig.json

Wir sind es gewohnt, verwandte Pfadaliase in Wepback zu konfigurieren. Damit VSCode sie erkennt, müssen wir die folgende Konfiguration vornehmen

{
 "Compileroptionen": {
 "Ziel": "ES6",
 "Modul": "commonjs",
 "allowSyntheticDefaultImports": wahr,
 "Basis-URL": "./",
 "Pfade": {
  "@/*": ["Quelle/*"]
 }
 },
 "ausschließen": ["Knotenmodule", "dist"],
 "einschließen": ["src/**/*", "global.d.ts"]
}

Installieren Sie das Plugin „vue-helper“.

Dieses Plugin wird installiert, um das Problem zu lösen, dass vscode-intelligence .vue-Dateien nicht erkennt und nicht navigieren kann

Allerdings gibt es noch einen Fehler. Wenn der Name der Importvariablen x nicht mit dem Dateinamen übereinstimmt, wird sie nicht erkannt.

Die ultimative Lösung besteht darin, .vue-Dateien mit js zu hosten

exportiere { Standard } aus './index.vue'

vscode kann in einem Schritt perfekt zu einer bestimmten Seite navigieren

Sie hassen es, sich wiederholenden Code zu schreiben? Definieren Sie ein Snippet

 "Standard exportieren": {
 "Umfang": "Javascript, Typescript",
 "Präfix": "expd",

 "body": ["exportieren Sie {default} aus './index.vue${1}';"]
 },
 "Standardmäßig exportieren als": {
 "Umfang": "Javascript, Typescript",
 "Präfix": "expdas",

 "body": ["exportieren Sie {default als ${2}} aus './index.vue${1}';"]
 },

Fügen Sie den an Vue angehängten Methoden oder Eigenschaften Typdeklarationen hinzu

Erstellen Sie eine neue global.d.ts im Stammverzeichnis und fügen Sie sie zu jsconfig.json: include

// global.d.ts
Vue von „vue“ importieren
Typ FnVoid = (...ags: beliebig[]) => void

Deklariere das Modul '*.vue' {
 Standard-Vue exportieren
}
Deklariere das Modul 'vue/types/vue' {
 Schnittstelle Vue {
 $$title: (Titel: Zeichenfolge) => void
 $$Anmeldung: FnVoid
 // ......
 }
}

Die richtigen Kommentare verfassen

VSCode bietet jetzt eine immer umfassendere Unterstützung für die jsdoc-Syntax, die uns während der Code-Schreibphase leistungsstarke Code-Eingabeaufforderungen, Code-Vervollständigung und Code-Prüfung bieten kann.

Beispielsweise können wir Variablen in Kommentaren definieren. Für die von der Liste zurückgegebene Schnittstelle sind benutzerdefinierte Variablen sehr nützlich, wenn wir zum Empfangen der Daten kein Modellobjekt definieren müssen.

Es unterstützt sogar Importsyntax

Annotationsvariablen, die keiner Methode zugeordnet sind, sind jedoch nicht verfügbar.

Ich erstelle beispielsweise eine neue Datei und schreibe folgende Kommentare

/**
 * @typedef {Object} Person
 * @property {string} Name
 * @property {number} Alter
 */

Es kann im Code nicht darauf verwiesen werden.

/**@Typ import('./test').person */

Ich denke, wir haben den Punkt erreicht, an dem abstrakte Objekte an vielen Stellen wiederverwendet werden. Warum nicht einfach neue Objekte unter der Modellebene erstellen?

Ich vermute, dass auch vscode auf dieser Überlegung basiert.

Wenn das Objekt durch Berechnung erhalten wird, kann die Code-Eingabeaufforderungsfunktion von vscode es außerdem nicht erkennen.

Der folgende Code kann nicht zur Eingabe von Objekteigenschaften auffordern

Wir versuchen diese Art des Schreibens beim Schreiben von Code zu vermeiden

const func = () => {
 return ['a', 'b', 'c'].reduce((vorher, aktuell) => {
 pre[cur] = 'hallo ' + cur
 Rückkehr vor
 }, {})
}

let obj = func()

Fortschrittlich

Was wäre, wenn wir den Ereignisdefinitionen in unserem Code Hinweise hinzufügen möchten?
Ich habe beispielsweise eine Veranstaltung registriert

test.on('handleInputClicked', () => {})

Leider ist dies auf jsdoc noch nicht möglich.

Glücklicherweise wurde in der neuesten Version von ts4.1.beta die Unterstützung für Typvorlagenzeichenfolgen hinzugefügt

Auf dieser Grundlage können wir sogar Unterstützung für vuex implementieren

Spezifische Dokumente finden Sie unter TypeScript 4.1 Type Template String, um die Typbeurteilung von Vuex store.commit und store.dispatch zu implementieren

Von Xiaoyuncai: http://www.cnblogs.com/phillyx/

github:http://github.com/phillyx

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung der Typerweiterung ohne Verwendung von Typsescript. Weitere Informationen zur Typerweiterung von Typsescript 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!