0Pricing
TypeScript Academy · Lektion

TypeScript zu JavaScript kompilieren

Verstehen Sie den TypeScript-Compiler und seine Ausgabe.

TypeScript zu JavaScript kompilieren ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

TypeScript kann nicht direkt in Node.js oder im Browser ausgeführt werden. Es muss zunächst in JavaScript kompiliert werden. In dieser Lektion lernen Sie, wie der TypeScript-Compiler funktioniert.

Den TypeScript-Compiler installieren

Installieren Sie TypeScript als Entwicklungsabhängigkeit in Ihrem Projekt. Nach der Installation steht der Befehl `tsc` in Ihren lokalen Skripten zur Verfügung.
npm install --save-dev typescript
npx tsc --version

Ihre erste tsc-Kompilierung

Führen Sie `tsc hello.ts` aus, um eine einzelne Datei zu kompilieren. Im selben Verzeichnis wird `hello.js` erzeugt, wobei alle Typen entfernt werden.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: Die Projektkonfiguration

Für ein echtes Projekt benötigen Sie eine `tsconfig.json`. Führen Sie `tsc --init` aus, um eine solche Datei zu erstellen. Sie steuert unter anderem das Ziel, das Modulformat, die Strenge und das Ausgabeverzeichnis.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Wichtige tsconfig-Optionen

Die wichtigsten tsconfig-Felder sind target (ausgegebene ES-Version), module (Modulsystem), outDir (Ausgabeordner) und strict (alle strikten Prüfungen aktivieren).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Überwachungsmodus mit tsc --watch

Führen Sie `tsc --watch` aus, um TypeScript-Dateien bei jedem Speichern automatisch neu zu kompilieren. Dadurch wird der Entwicklungszyklus beschleunigt.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: Typprüfung ohne Dateien zu erzeugen

Das Flag `noEmit` führt die Typprüfung aus, ohne Ausgabedateien zu schreiben. Dies ist in CI-Pipelines nützlich, die für die eigentliche Kompilierung einen Bundler wie Vite oder esbuild verwenden.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Schnellere Alternativen: ts-node und tsx

Für die Entwicklung können Sie TypeScript mit `ts-node` oder dem schnelleren Tool `tsx` direkt ausführen, ohne einen separaten Kompilierungsschritt.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Source Maps zum Debuggen

Aktivieren Sie `sourceMap: true`, damit Browser-DevTools und Node.js-Debugger die Zeilen der kompilierten JS-Datei auf den ursprünglichen TypeScript-Quellcode zurückführen können.
{ "compilerOptions": { "sourceMap": true } }

Deklarationsdateien (.d.ts)

Mit `declaration: true` erzeugt der Compiler zusätzlich `.d.ts`-Dateien. Dadurch können andere TypeScript-Projekte Ihre Bibliothek mit vollständigen Typinformationen verwenden.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Compilerfehler blockieren die Ausgabe standardmäßig

Wenn Ihr TypeScript Typfehler enthält, gibt `tsc` standardmäßig trotzdem JavaScript aus, beendet sich jedoch mit einem Exit-Code ungleich null. Verwenden Sie `noEmitOnError: true`, um die Ausgabe bei Fehlern zu verhindern.
{ "compilerOptions": { "noEmitOnError": true } }

Kurze Überprüfung

Was bewirkt die Ausführung von `tsc --noEmit`?

Zusammenfassung

Der TypeScript-Compiler wandelt .ts-Dateien in JavaScript um. Konfigurieren Sie ihn mit tsconfig.json, verwenden Sie --watch für die Entwicklung, --noEmit nur für die Typprüfung und ts-node/tsx, um TypeScript direkt auszuführen.

Häufig gestellte Fragen

Ist die Lektion „TypeScript zu JavaScript kompilieren“ kostenlos?

Ja — der vollständige Text von „TypeScript zu JavaScript kompilieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „TypeScript zu JavaScript kompilieren“?

Verstehen Sie den TypeScript-Compiler und seine Ausgabe. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „TypeScript zu JavaScript kompilieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Schwachstellen von JavaScript: Laufzeitfehler
  2. Was TypeScript zu JavaScript hinzufügt
  3. TypeScript zu JavaScript kompilieren
  4. Wann Sie TypeScript in Ihren Projekten verwenden sollten
← Zurück zu TypeScript Academy