TypeScript verwendet vscode, um den Codekompilierungsprozess zu überwachen

TypeScript verwendet vscode, um den Codekompilierungsprozess zu überwachen

Installieren

  • Installieren Sie den TS-Befehl global: npm install -g typescript
  • Führen Sie nach Abschluss der Installation den Befehl tsc -v aus, um die Versionsnummer anzuzeigen und anzugeben, dass die Installation erfolgreich war.
  • Als nächstes können Sie den TSC-Dateinamen verwenden, um die TSC-Datei in eine JS-Datei zu konvertieren. Die JS-Datei kann direkt in die HTML-Datei eingefügt und verwendet werden.

TS-Dateien ansehen

Führen Sie tsc --init im Ordner aus, um eine tsconfig.json-Datei zu generieren. Öffnen Sie die Datei und Sie sehen den folgenden Inhalt:

{
  "Compileroptionen": {
    /* Besuchen Sie https://aka.ms/tsconfig.json, um mehr über diese Datei zu erfahren */

    /* Projekte */
    // "incremental": true, /* Inkrementelle Kompilierung aktivieren */
    // "composite": true, /* Aktivieren Sie Einschränkungen, die die Verwendung eines TypeScript-Projekts mit Projektreferenzen ermöglichen. */
    // "tsBuildInfoFile": "./", /* Geben Sie den Ordner für die inkrementellen Kompilierungsdateien .tsbuildinfo an. */
    // "disableSourceOfProjectReferenceRedirect": true, /* Deaktivieren der Bevorzugung von Quelldateien anstelle von Deklarationsdateien beim Verweisen auf zusammengesetzte Projekte */
    // "disableSolutionSearching": true, /* Ein Projekt beim Bearbeiten von der Referenzprüfung mehrerer Projekte ausschließen. */
    // "disableReferencedProjectLoad": true, /* Reduziert die Anzahl der von TypeScript automatisch geladenen Projekte. */

    /* Sprache und Umgebung */
    "target": "es2016", /* Legen Sie die JavaScript-Sprachversion für ausgegebenes JavaScript fest und schließen Sie kompatible Bibliotheksdeklarationen ein. */
    // "lib": [], /* Geben Sie einen Satz gebündelter Bibliotheksdeklarationsdateien an, die die Ziellaufzeitumgebung beschreiben. */
    // "jsx": "preserve", /* Geben Sie an, welcher JSX-Code generiert wird. */
    // "experimentalDecorators": true, /* Aktiviere experimentelle Unterstützung für TC39 Stufe 2 Entwurfsdekoratoren. */
    // "emitDecoratorMetadata": true, /* Designtyp-Metadaten für dekorierte Deklarationen in Quelldateien ausgeben. */
    // "jsxFactory": "", /* Geben Sie die JSX-Factory-Funktion an, die beim Zielen auf React JSX-Emit verwendet wird, z. B. „React.createElement“ oder „h“ */
    // "jsxFragmentFactory": "", /* Geben Sie die JSX-Fragmentreferenz an, die für Fragmente verwendet wird, wenn auf React JSX-Emission abgezielt wird, z. B. „React.Fragment“ oder „Fragment“. */
    // "jsxImportSource": "", /* Geben Sie den Modulspezifizierer an, der zum Importieren der JSX-Factory-Funktionen verwendet wird, wenn `jsx: react-jsx*` verwendet wird.` */
    // "reactNamespace": "", /* Geben Sie das für `createElement` aufgerufene Objekt an. Dies gilt nur, wenn `react` JSX-Emission als Ziel verwendet wird. */
    // "noLib": true, /* Deaktiviert das Einbinden jeglicher Bibliotheksdateien, einschließlich der Standard-lib.d.ts. */
    // "useDefineForClassFields": true, /* ECMAScript-standardkonforme Klassenfelder ausgeben. */

    /* Module */
    "module": "commonjs", /* Geben Sie an, welcher Modulcode generiert wird. */
    // "rootDir": "./", /* Geben Sie den Stammordner in Ihren Quelldateien an. */
    // "moduleResolution": "node", /* Geben Sie an, wie TypeScript eine Datei aus einem bestimmten Modulspezifizierer sucht. */
    // "baseUrl": "./", /* Geben Sie das Basisverzeichnis an, um nicht relative Modulnamen aufzulösen. */
    // "Pfade": {}, /* Geben Sie eine Reihe von Einträgen an, die Importe zusätzlichen Nachschlageorten zuordnen. */
    // "rootDirs": [], /* Erlaubt, dass mehrere Ordner beim Auflösen von Modulen als ein einziger Ordner behandelt werden. */
    // "typeRoots": [], /* Geben Sie mehrere Ordner an, die sich wie `./node_modules/@types` verhalten. */
    // "types": [], /* Geben Sie Typpaketnamen an, die eingeschlossen werden sollen, ohne dass in einer Quelldatei darauf verwiesen wird. */
    // "allowUmdGlobalAccess": true, /* Erlaube den Zugriff auf UMD-Globale von Modulen aus. */
    // "resolveJsonModule": true, /* Importieren von .json-Dateien aktivieren */
    // "noResolve": true, /* Verhindern Sie, dass `import`s, `require`s oder `<reference>`s die Anzahl der Dateien erhöhen, die TypeScript zu einem Projekt hinzufügen soll. */

    /* JavaScript-Unterstützung */
    // "allowJs": true, /* Erlauben Sie JavaScript-Dateien, Teil Ihres Programms zu sein. Verwenden Sie die Option `checkJS`, um Fehler aus diesen Dateien zu erhalten. */
    // "checkJs": true, /* Aktiviere die Fehlerberichterstattung in typgeprüften JavaScript-Dateien. */
    // "maxNodeModuleJsDepth": 1, /* Geben Sie die maximale Ordnertiefe an, die zum Überprüfen von JavaScript-Dateien aus `node_modules` verwendet wird. Gilt nur mit `allowJs`. */

    /* Ausgeben */
    // "declaration": true, /* Generieren Sie .d.ts-Dateien aus TypeScript- und JavaScript-Dateien in Ihrem Projekt. */
    // "declarationMap": true, /* Sourcemaps für d.ts-Dateien erstellen. */
    // "emitDeclarationOnly": true, /* Nur d.ts-Dateien und keine JavaScript-Dateien ausgeben. */
    // "sourceMap": true, /* Source-Map-Dateien für ausgegebene JavaScript-Dateien erstellen. */
    // "outFile": "./", /* Geben Sie eine Datei an, die alle Ausgaben in einer JavaScript-Datei bündelt. Wenn `declaration` wahr ist, wird auch eine Datei angegeben, die alle .d.ts-Ausgaben bündelt. */
    // Hier können Sie das Ausgabeverzeichnis für JS-Dateien konfigurieren „outDir“: „./js/“, /* Geben Sie einen Ausgabeordner für alle ausgegebenen Dateien an. */
    // "removeComments": true, /* Kommentare ausgeben deaktivieren. */
    // "noEmit": true, /* Deaktiviert die Ausgabe von Dateien aus einer Kompilierung. */
    // "importHelpers": true, /* Ermöglicht das Importieren von Hilfsfunktionen aus tslib einmal pro Projekt, anstatt sie pro Datei einzubinden. */
    // "importsNotUsedAsValues": "remove", /* Geben Sie das Emit-/Prüfverhalten für Importe an, die nur für Typen verwendet werden */
    // "downlevelIteration": true, /* Gibt konformeres, aber ausführlicheres und weniger leistungsfähiges JavaScript für die Iteration aus. */
    // "sourceRoot": "", /* Geben Sie den Stammpfad an, damit Debugger den Referenzquellcode finden können. */
    // "mapRoot": "", /* Geben Sie den Speicherort an, an dem der Debugger die Map-Dateien statt der generierten Speicherorte ablegen soll. */
    // "inlineSourceMap": true, /* Fügen Sie Sourcemap-Dateien in das ausgegebene JavaScript ein. */
    // "inlineSources": true, /* Fügen Sie den Quellcode in die Sourcemaps innerhalb des ausgegebenen JavaScripts ein. */
    // "emitBOM": true, /* Gibt am Anfang der Ausgabedateien ein UTF-8-Byte Order Mark (BOM) aus. */
    // "newLine": "crlf", /* Setzt das Zeilenumbruchzeichen für die Ausgabe von Dateien. */
    // "stripInternal": true, /* Deaktivieren der Ausgabe von Deklarationen, deren JSDoc-Kommentare „@internal“ enthalten. */
    // "noEmitHelpers": true, /* Deaktivieren Sie die Generierung benutzerdefinierter Hilfsfunktionen wie `__extends` in der kompilierten Ausgabe. */
    // "noEmitOnError": true, /* Deaktivieren Sie die Ausgabe von Dateien, wenn Fehler bei der Typprüfung gemeldet werden. */
    // "preserveConstEnums": true, /* Deaktivieren des Löschens von `const enum`-Deklarationen im generierten Code. */
    // "declarationDir": "./", /* Geben Sie das Ausgabeverzeichnis für generierte Deklarationsdateien an. */
    // "preserveValueImports": true, /* Bewahrt unbenutzte importierte Werte in der JavaScript-Ausgabe auf, die sonst entfernt würden. */

    /* Interop-Einschränkungen */
    // "isolatedModules": true, /* Stellen Sie sicher, dass jede Datei sicher transpiliert werden kann, ohne auf andere Importe angewiesen zu sein. */
    // "allowSyntheticDefaultImports": true, /* Erlaube „x von y importieren“, wenn ein Modul keinen Standardexport hat. */
    "esModuleInterop": true, /* Zusätzliches JavaScript ausgeben, um den Import von CommonJS-Modulen zu unterstützen. Dies aktiviert `allowSyntheticDefaultImports` für die Typkompatibilität. */
    // "preserveSymlinks": true, /* Deaktivieren Sie das Auflösen von Symlinks in ihren Realpath. Dies korreliert mit dem gleichen Flag im Knoten. */
    "forceConsistentCasingInFileNames": true, /* Stellen Sie sicher, dass beim Importieren die Groß-/Kleinschreibung korrekt ist. */

    /* Typprüfung */
    "strict": true, /* Aktiviere alle Optionen zur strengen Typprüfung. */
    // "noImplicitAny": true, /* Aktiviere die Fehlerberichterstattung für Ausdrücke und Deklarationen mit einem impliziten „any“-Typ.. */
    // "strictNullChecks": true, /* Berücksichtigen Sie bei der Typprüfung „null“ und „undefined“. */
    //"strictFunctionTypes": true, /* Bei der Funktionszuweisung ist auf die Subtypkompatibilität der Parameter und der Rückgabewerte zu achten. */
    // "strictBindCallApply": true, /* Überprüfen Sie, ob die Argumente für die Methoden „bind“, „call“ und „apply“ mit der ursprünglichen Funktion übereinstimmen. */
    // "strictPropertyInitialization": true, /* Überprüfe, ob Klasseneigenschaften deklariert, aber im Konstruktor nicht festgelegt sind. */
    // "noImplicitThis": true, /* Aktiviere die Fehlerberichterstattung, wenn „this“ den Typ „any“ erhält. */
    // "useUnknownInCatchVariables": true, /* Geben Sie Catch-Klausel-Variablen als „unbekannt“ statt „beliebig“ ein. */
    // "alwaysStrict": true, /* Stelle sicher, dass immer „use strict“ ausgegeben wird. */
    // "noUnusedLocals": true, /* Aktiviere die Fehlerberichterstattung, wenn eine lokale Variable nicht gelesen wird. */
    // "noUnusedParameters": true, /* Einen Fehler auslösen, wenn ein Funktionsparameter nicht gelesen wird */
    // "exactOptionalPropertyTypes": true, /* Optionale Eigenschaftstypen wie geschrieben interpretieren, anstatt „undefined“ hinzuzufügen. */
    // "noImplicitReturns": true, /* Aktiviere die Fehlerberichterstattung für Codepfade, die nicht explizit in einer Funktion zurückkehren. */
    // "noFallthroughCasesInSwitch": true, /* Aktiviere die Fehlerberichterstattung für Fallthrough-Fälle in Switch-Anweisungen. */
    // "noUncheckedIndexedAccess": true, /* ‚undefined‘ in Indexsignaturergebnisse einschließen */
    // "noImplicitOverride": true, /* Stellen Sie sicher, dass überschreibende Mitglieder in abgeleiteten Klassen mit einem Override-Modifikator markiert sind. */
    // "noPropertyAccessFromIndexSignature": true, /* Erzwingt die Verwendung indizierter Zugriffsmethoden für Schlüssel, die mit einem indizierten Typ deklariert wurden */
    // "allowUnusedLabels": true, /* Deaktiviert die Fehlerberichterstattung für nicht verwendete Labels. */
    // "allowUnreachableCode": true, /* Fehlerberichterstattung für nicht erreichbaren Code deaktivieren. */

    /* Vollständigkeit */
    // "skipDefaultLibCheck": true, /* Überspringe die Typprüfung von .d.ts-Dateien, die in TypeScript enthalten sind. */
    "skipLibCheck": true /* Überspringe die Typprüfung aller .d.ts-Dateien. */
  }
}

Nach dem Ende können Sie auf das Terminal von vscode klicken, auf die Konfigurationsaufgabe klicken und TSC-Überwachung auswählen. Wenn ein Fehler gemeldet wird und der Fehlerinhalt ungefähr wie folgt lautet

Datei C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1 kann nicht geladen werden, da das Ausführen von Skripts auf diesem System verboten ist.

Zu diesem Zeitpunkt müssen Sie ein separates PowerShell-Fenster öffnen und den Befehl Set-ExecutionPolicy RemoteSigned eingeben. Klicken Sie auf Alle und führen Sie die Überwachungsaufgabe erneut aus, um die normale Überwachung durchzuführen.

Klicken Sie erneut auf das Terminal, klicken Sie auf „Task ausführen“ und wählen Sie „TSC-Überwachung“ aus, um die Änderungen der TS-Dateien in Echtzeit zu überwachen und die entsprechenden JS-Dateien selbst zu generieren.

Dies ist das Ende dieses Artikels über die Verwendung von vscode zur Überwachung der Codekompilierung in TypeScript. Weitere relevante Inhalte zur Überwachung der Codekompilierung mit ts vscode finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Schritte zum Erstellen der TypeScript-Umgebung und Bereitstellen in VSCode
  • So bearbeiten Sie TypeScript mit VsCode
  • VSCode-Entwicklung TypeScript-Implementierungsschritte

<<:  CSS-Sprites-Technologie integriert mehrere Hintergründe in ein PNG-Bild CSS-Positionierung

>>:  Über die Überlappung von Randwert und vertikalem Rand in CSS

Artikel empfehlen

So richten Sie eine automatische tägliche Datenbanksicherung in Linux ein

Dieser Artikel verwendet das Centos7.6-System und...

Der Unterschied zwischen ENTRYPOINT und CMD in Dockerfile

Im Lernprogramm zum Docker-System haben wir geler...

So löschen Sie Tabellendaten in MySQL

Es gibt zwei Möglichkeiten, Daten in MySQL zu lös...

MySQL-Abfrageoptimierung: Ursachen und Lösungen für langsame Abfragen

Freunde, die in der Entwicklung tätig sind, insbe...

Rhit effiziente Visualisierung Nginx-Protokollanzeigetool

Inhaltsverzeichnis Einführung Installieren Anzeig...

Tomcat erhält den Clientdomänennamen des Nginx-Reverse-Proxys

Frage Nach dem Nginx-Reverse-Proxy erhält die Tom...

Webpack lädt CSS-Dateien und ihre Konfigurationsmethode

webpack lädt CSS-Dateien und deren Konfiguration ...

So installieren Sie einen SVN-Server unter Linux

1. Yum-Installation yum installiere Subversion 2....

Zusammenfassung der Blockelemente, Inline-Elemente und variablen Elemente

Blockelement p - Absatz Text vorformatieren Tisch ...

Vue Storage enthält eine Lösung für Boolesche Werte

Vue speichert Speicher mit Booleschen Werten Ich ...