TS ist ein Typprüfungstool für JS , das einige unsichtbare Probleme überprüft, die möglicherweise in unserem Code vorhanden sind; gleichzeitig kann es unserem Compiler ermöglichen, einige Syntax-Aufforderungsfunktionen zu haben .
Wenn wir create-vue (offizielles Vue3-Scaffolding-Tool) verwenden, um ein Projekt zu erstellen, basiert das Projekt auf Vite und TypeScript ist direkt für die TS-Entwicklung bereit.
In diesem Artikel besprechen wir die Unterstützung für TS in jedem Installationsprojekt (ohne Gerüstbau).
Vite unterstützt TS natürlich
Wir erstellen und initialisieren ein Projekt (yarn init -y), installieren Vite (yarn add Vite -D).
Erstellen Sie dann eine Eintragsdatei index.html und führen Sie unsere benutzerdefinierte main.ts -Datei ein
<script src="./main.ts" type="module"></script>
main.ts-Datei
let tip:string = "这是一个vite项目，使用了ts语法"
console.log('tip: ', tip);
Wir verwenden den Befehl vite, um das Projekt im Terminal zu starten, und wir können sehen, dass die Konsole das ausgibt, was wir gedruckt haben.
In dieser Demo haben wir vite nur für gewöhnliche Projekte installiert, ohne ts-bezogene Plug-Ins zu installieren.
Daraus ist ersichtlich, dass vite die Unterstützung für ts bereits intern verarbeitet hat und wir diese direkt nutzen können.
Verwenden Sie Plugins, um unsere Fähigkeiten zu verbessern
In einem reinen Vite-Projekt zeigt Vite keine ts-Syntaxfehler an und blockiert standardmäßig seine Kompilierung.
HINWEIS: Wir sprechen über den Fall, ohne ein Gerüst zu verwenden!
Beispielsweise weisen wir den Zeichentyp tip einer Zahl in main.ts zu
let tip:string = "这是一个vite项目，使用了ts语法"
tip = 2
console.log('tip: ', tip);
Eine solche TS-Syntax ist problematisch, wird aber dennoch erfolgreich kompiliert.
Um uns selbst streng zu fordern und das Code-Level zu verbessern, sollten wir die Fehlerausgabe in der Konsole das Kompilieren verhindern lassen und uns zur Lösung des Problems zwingen.
Diese Funktion kann durch vite-plugin-checker realisiert werden .
vite-plugin-checker ist ein Plug-in, das TypeScript, VLS, vue-tsc und ESLint in einem Worker-Thread ausführen kann, das Kompilieren blockieren und je nach Konfiguration Fehlermeldungen auf der Konsole und im Browser anzeigen kann.
Abhängigkeitsinstallation
npm i vite-plugin-checker -D
Erstellen Sie eine Konfigurationsdatei vite.config.js im Stammverzeichnis und führen Sie vite-plugin-checker ein
// vite.config.js
import checker from "vite-plugin-checker";
import { defineConfig } from "vite";
export default defineConfig({plugins: [checker({typescript: true,}),],
});
Zu diesem Zeitpunkt wird beim direkten Ausführen des Projekts immer noch ein Fehler gemeldet, da die ts-Konfigurationsdatei tsconfig.json ebenfalls erforderlich ist. Wir verwenden die Befehlszeile zum Generieren
npx tsc --init
Nachdem Sie die Konfigurationsdatei tsconfig.json erstellt haben, starten Sie den Vite-Dienst neu und Sie werden feststellen, dass der Syntaxfehler von TS ausgegeben wurde
Konsolenausgabe
Browserausgabe
Nun, solange wir einen problematischen TS schreiben, wird vite einen Fehler melden, uns das Problem finden und rechtzeitig beheben lassen! Es riecht so gut!
TS-Prüfung vor dem Verpacken
Vite führt nur die Übersetzung von .ts-Dateien durch und führt keine Typprüfung durch. Das bedeutet, dass selbst bei einem Grammatikfehler von Ts in unserem Projekt die Paketierung normal weitergehen kann.
Wie können wir als exzellenter Entwickler eine solche Situation zulassen?
Wir können die folgende Syntax verwenden, um eine Codeinspektion zur Paketierungszeit durchzuführen:
- Führen Sie tsc --noEmit im Build-Skript aus
- Für .vue-Dateien können Sie vue-tsc installieren und vue-tsc --noEmit ausführen , um Ihre *.vue-Dateien zu überprüfen
Wir konfigurieren es in package.json zur Überprüfung:
// package.json"scripts": {"dev": "vite",// 如果ts检查不通过，vite build就不会执行"build": "tsc --noEmit && vite build",},
Führen Sie dann npm run build aus, um den Paketierungsbefehl auszuführen
Tatsächlich wurde die Kompilierung zu diesem Zeitpunkt blockiert.
Das Ausführungsprinzip von tsc --noEmit
Dies ist die eingebaute Syntax von ts und hat nichts mit vite zu tun. Beim Ausführen von tsc --noEmit liest TSC die Konfigurationsdatei, um Parameterwerte zu erhalten. Die Funktion von --noEmit besteht darin, nur zu prüfen und nicht zu kompilieren und auszugeben. Wenn unser Code fehlerfrei ist, wird er direkt beendet, andernfalls wird ein Fehler gemeldet.
IntelliSense für TypeScript
Informationen zu Umgebungsvariablen finden Sie unter juejin.cn/post/717201…
Standardmäßig stellt Vite Typdefinitionen für import.meta.env in vite/client.d.ts bereit . Einige benutzerdefinierte .env[mode]-Dateien verfügen jedoch nicht über TypeScript-IntelliSense.
Dazu können wir eine env.d.ts - Datei im src-Verzeichnis erstellen und dann Definitionen wie folgt hinzufügen:
/// <reference types="vite/client" />
interface ImportMetaEnv {// 自定义内容...readonly VITE_APP_TITLE: stringreadonly VITE_APP_HAHA: stringreadonly VITE_APP_WOCAO: string// 自定义内容...
}
interface ImportMeta {readonly env: ImportMetaEnv
}
Hinweis: Die Vorlage muss zum Schreiben installiert sein, diese Methode gilt für alle Projekte und das gleiche gilt für Gerüstprojekte
Beispiel:
Test in main.ts
Wie im Bild gezeigt, können wir sehen, dass unsere intelligente Eingabeaufforderung wirksam geworden ist.
Hier bin ich auf einen Fehlerbericht in vscode gestoßen, der nur ein Fehlerbericht von ts ist und nichts mit dem Setzen unserer Variablen zu tun hat.
Das Fehlerproblem ist auch sehr einfach: ts denkt jetzt, dass unser Projekt auf commonjs basiert, also gibt es kein import.meta-Attribut.
Wir können den Wert des Moduls auf "es2022" ändern.
Zu guter Letzt
Ich habe kürzlich ein VUE-Dokument gefunden, das die verschiedenen Wissenspunkte von VUE zusammenfasst und in "36 Fähigkeiten, die die Vue-Entwicklung kennen muss" organisiert. Der Inhalt ist relativ detailliert und die Erklärung der einzelnen Wissenspunkte ist ebenfalls vorhanden.
Freunde in Not, Sie können auf die Karte unten klicken, um sie kostenlos zu erhalten und zu teilen