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

Erweiterte Erklärung der Javascript-Funktionen

Inhaltsverzeichnis Funktionsdefinitionsmethode Fu...

Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

Inhaltsverzeichnis 1. Datenbankdesign 2. Frontend...

Bedingte Kommentare zur Bestimmung des Browsers (IE-Reihe)

<!--[if IE 6]> Nur IE6 kann erkennen <![e...

Einige Tipps zum Website-Design

Tatsächlich haben wir in letzter Zeit viel über W...

Vue3 implementiert ein Beispiel für eine Nachrichtenkomponente

Inhaltsverzeichnis Komponentendesign Definieren d...

Lösungen für das Problem der Erstellung von XHTML- und CSS-Webseiten

Die Lösungen für die Probleme, die bei der Erstell...

Implementierung einer Login-Seite basierend auf layui

In diesem Artikelbeispiel wird der spezifische Co...

Beschreibung der chinesischen Sortierregeln für MySQL

Bei der Verwendung von MySQL sortieren und fragen...

VMWare Linux MySQL 5.7.13 Installations- und Konfigurationstutorial

In diesem Artikel finden Sie das Tutorial zur Ins...

Beispiel zum Ändern des Zeilenabstands einer HTML-Tabelle

Bei der Verwendung von HTML-Tabellen müssen wir m...

Implementierung des WeChat-Applet-Nachrichten-Pushs in Nodejs

Auswählen oder Erstellen einer Abonnementnachrich...

HTML-Grundlagen - Pflichtlektüre - Umfassendes Verständnis von CSS-Stylesheets

CSS (Cascading Style Sheet) wird zum Verschönern ...