Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

// B1.2 · ca. 30 Min. · Einstieg

TypeScript 7.0 installieren und tsc ausführen

Nach dieser Lektion installieren Sie TypeScript 7.0 in einem Projekt, prüfen, welches tsc es ausführt, und prüfen ein Projekt aus mehreren Dateien mit npx tsc.

Lektion 2 von 5 in B1 Einrichtung und Grundlagen

Danach können Sie

  • TypeScript 7.0 mit npm installieren und prüfen, welche Version npx tsc ausführt
  • npx tsc für ein Projekt ausführen und an der Ausgabe erkennen, welche Datei und Zeile zu korrigieren ist
  • Zwischen Dateien importieren, sodass npx tsc keine Fehler meldet und node main.ts läuft

  1. Aufwärmen · Aufgabe 1 von 7

    Aufwärmen mit npm: Sie führen npm install -D typescript in einem Projektordner mit package.json aus. Was passiert? Wählen Sie alle zutreffenden.

    Wählen Sie alle zutreffenden aus.

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher: Heute (30. September 2026) führen Sie in einem neuen Projekt npm install -D typescript aus, dann npx tsc --version. Was wird ausgegeben?

  3. Üben · Aufgabe 3 von 7

    Ergänzen Sie die kurze Option, die TypeScript als Entwicklungsabhängigkeit des Projekts speichert.

    npm install typescript

  4. Üben · Aufgabe 4 von 7

    main.ts enthält import {half} from "./math.ts"; und in Zeile 3 console.log(half(9));. Das hier ist math.ts. Was meldet npx tsc?

    export function half(n: number): number {
  const result = n / 2;
  return result.toFixed(1);
}

  5. Üben · Aufgabe 5 von 7

    Ordnen Sie jedem Befehl zu, was er tut.

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. Der Ordner enthält package.json, die tsconfig.json des Kurses und diese main.ts. npx tsc findet keine Fehler. Welche neuen Dateien liegen danach im Ordner?

    const greeting: string = "Hello";
console.log(greeting);

  7. Anwenden · Aufgabe 7 von 7

    Kleine Aufgabe auf Ihrem Rechner (sie braucht Node.js und Internet). Legen Sie einen Ordner an, darin eine package.json mit {"type": "module"}, und führen Sie npm install -D typescript aus. Prüfen Sie npx tsc --version. Kopieren Sie die tsconfig.json des Kurses aus der letzten Lektion in den Ordner, schreiben Sie eine main.ts, die etwas ausgibt, und führen Sie npx tsc aus, dann node main.ts. Bauen Sie danach absichtlich einen Typfehler ein und starten Sie npx tsc erneut.

    Prüfen Sie Ihr Ergebnis anhand dieser Liste

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Ein Projekt aus zwei Dateien

main.ts importiert formatPrice aus format.ts, addiert drei Preise und gibt die Summe mit und ohne 19 % Steuer aus. Speichern Sie beide Dateien neben der tsconfig.json des Kurses und führen Sie npx tsc aus: Es prüft beide Dateien und gibt nichts aus. Dann node main.ts. Rufen Sie probeweise formatPrice(total) ohne Währung auf und starten Sie npx tsc erneut: Die Meldung nennt main.ts, wo der Aufruf steht.

main.ts

// main.ts imports a function from format.ts; npx tsc checks both files.
import {formatPrice} from "./format.ts";

const prices: number[] = [3.5, 4.25, 2];
let total = 0;
for (const price of prices) {
  total += price;
}

console.log("items:", prices.length);
console.log("total:", formatPrice(total, "EUR"));
console.log("with 19% tax:", formatPrice(total * 1.19, "EUR"));

format.ts

export function formatPrice(amount: number, currency: string): string {
  return amount.toFixed(2) + " " + currency;
}

Ausführen mit

npx tsc
node main.ts

Ausgabe

items: 3
total: 9.75 EUR
with 19% tax: 11.60 EUR
  • Der Import nennt die Datei mit Endung, ./format.ts, und genau diese Datei lädt node main.ts.
  • export macht formatPrice für andere Dateien sichtbar; ohne export schlüge der Import fehl.
  • tsc prüft den Aufruf in main.ts gegen die Parameter, die format.ts deklariert, über beide Dateien hinweg.
  • npx tsc gibt für ein Projekt ohne Fehler nichts aus und schreibt mit der tsconfig des Kurses keine .js-Dateien.
Ändern und ausführen

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den TypeScript-Compiler herunter (bis zu 2.1 MB) und speichert ihn im Cache. Ihr Code bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 2

Die Version lesen, die tsc ausgibt

npx tsc --version gibt Text wie Version 7.0.2 aus. majorVersion soll diesen Text nehmen und die Hauptversion als Zahl liefern: 7. Stattdessen liefert sie den Text "7", und tsc meldet das. Korrigieren Sie die return-Zeile, sodass sie eine Zahl liefert. Starten Sie die Tests: Der erste ist die Typprüfung.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den TypeScript-Compiler herunter (bis zu 2.1 MB) und speichert ihn im Cache. Ihr Code bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    tsc meldet main.ts(3,3): error TS2322: Type 'string' is not assignable to type 'number'. Zeile 3 liefert Text.

  2. Hinweis 2

    split liefert ein Array aus Strings; version.split(".")[0] ist also der String "7".

  3. Hinweis 3

    Machen Sie den Text vor dem return zur Zahl: return Number(version.split(".")[0]);

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

export function majorVersion(output: string): number {
  const version = output.replace("Version ", "");
  return Number(version.split(".")[0]);
}
Auf dem eigenen Computer ausführen

Installieren Sie TypeScript 7.0 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.ts

export function majorVersion(output: string): number {
  const version = output.replace("Version ", "");
  return version.split(".")[0];
}

main.test.ts

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {majorVersion} from './main.ts';

test('Version 7.0.2 ergibt 7', () => {
  assert.equal(majorVersion('Version 7.0.2'), 7, 'majorVersion("Version 7.0.2") sollte die Zahl 7 sein');
});

test('Version 6.0.3 ergibt 6', () => {
  assert.equal(majorVersion('Version 6.0.3'), 6, 'majorVersion("Version 6.0.3") sollte die Zahl 6 sein');
});

test('Version 10.1.0 ergibt 10', () => {
  assert.equal(majorVersion('Version 10.1.0'), 10, 'majorVersion("Version 10.1.0") sollte die Zahl 10 sein');
});

package.json

{
  "type": "module"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "nodenext",
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [],
    "strict": true,
    "noEmit": true,
    "erasableSyntaxOnly": true,
    "verbatimModuleSyntax": true,
    "allowImportingTsExtensions": true
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "**/*.test.ts"
  ]
}

npx tsc braucht TypeScript im Ordner: Führen Sie dort einmal npm install --save-dev typescript aus. tsc prüft die Typen; Node.js führt main.ts aus, indem es sie entfernt.

Programm ausführen:

npx tsc
node main.ts

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

npx tsc
node --test
learnrun.js herunterladen

Übung 2 von 2

Eine Funktion aus einer anderen Datei aufrufen

format.ts (neben main.ts; lassen Sie sie, wie sie ist) exportiert formatPrice(amount: number, currency: string). main.ts soll Total: 9.75 EUR ausgeben, aber tsc meldet einen Fehler, und node main.ts bricht mit TypeError: amount.toFixed is not a function ab. Lesen Sie die Meldung und korrigieren Sie dann den Aufruf in main.ts.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den TypeScript-Compiler herunter (bis zu 2.1 MB) und speichert ihn im Cache. Ihr Code bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    tsc meldet main.ts(8,35): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

  2. Hinweis 2

    total.toFixed(2) macht die Zahl bereits zu Text. formatPrice will die Zahl und ruft toFixed selbst auf.

  3. Hinweis 3

    Übergeben Sie total selbst: formatPrice(total, "EUR").

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

import {formatPrice} from "./format.ts";

const prices = [3.5, 4.25, 2];
let total = 0;
for (const price of prices) {
  total += price;
}
console.log("Total:", formatPrice(total, "EUR"));
Auf dem eigenen Computer ausführen

Installieren Sie TypeScript 7.0 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.ts

import {formatPrice} from "./format.ts";

const prices = [3.5, 4.25, 2];
let total = 0;
for (const price of prices) {
  total += price;
}
console.log("Total:", formatPrice(total.toFixed(2), "EUR"));

main.test.ts

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

test('das Programm gibt Total: 9.75 EUR aus', async () => {
  const out = (await runMain()).trimEnd();
  assert.equal(out, 'Total: 9.75 EUR', `das Programm gab ${JSON.stringify(out)} aus`);
});

format.ts

export function formatPrice(amount: number, currency: string): string {
  return amount.toFixed(2) + " " + currency;
}

package.json

{
  "type": "module"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "nodenext",
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [],
    "strict": true,
    "noEmit": true,
    "erasableSyntaxOnly": true,
    "verbatimModuleSyntax": true,
    "allowImportingTsExtensions": true
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "**/*.test.ts"
  ]
}

npx tsc braucht TypeScript im Ordner: Führen Sie dort einmal npm install --save-dev typescript aus. tsc prüft die Typen; Node.js führt main.ts aus, indem es sie entfernt.

Programm ausführen:

npx tsc
node main.ts

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

npx tsc
node --test
learnrun.js herunterladen

Häufige Fehler

Ein Import ohne Dateiendung

import {formatPrice} from "./format";

console.log(formatPrice(9.75, "EUR"));

Was tsc oder Node.js ausgibt

main.ts(1,27): error TS2835: Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './format.js'?

Warum, und die Lösung

In einem ES-Modul lädt Node.js genau den Pfad, den Sie schreiben, und eine Datei namens format gibt es nicht. tsc schlägt ./format.js vor, den Namen, den die Datei nach dem Kompilieren zu JavaScript hätte. In diesem Kurs führt Node.js die .ts-Dateien selbst aus; schreiben Sie also "./format.ts", was die tsconfig des Kurses erlaubt. Mit ./format.js ist tsc zufrieden, aber node main.ts bricht ab, weil es keine format.js gibt.

Der Fehler steckt in der importierten Datei

import {formatPrice} from "./format.ts";

console.log(formatPrice(9.75, "eur"));

Was tsc oder Node.js ausgibt

format.ts(2,45): error TS2551: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?

Warum, und die Lösung

npx tsc prüft jede Datei im Projekt; die Meldung kann also eine andere Datei als main.ts nennen. Lesen Sie zuerst den Dateinamen: Hier steckt der Tippfehler in format.ts, Zeile 2, Spalte 45. Korrigieren Sie ihn dort zu toUpperCase. main.ts stimmt und braucht keine Änderung.

Ein Argument vergessen

import {formatPrice} from "./format.ts";

console.log(formatPrice(9.75));

Was tsc oder Node.js ausgibt

main.ts(3,13): error TS2554: Expected 2 arguments, but got 1.

Warum, und die Lösung

formatPrice deklariert zwei Parameter, amount und currency, und keiner ist optional; jeder Aufruf muss also beide übergeben. In reinem JavaScript läuft der Aufruf, und currency ist undefined: node main.ts gibt 9.75 undefined aus. tsc prüft jeden Aufruf gegen die Funktion, die in der anderen Datei deklariert ist. Übergeben Sie die Währung: formatPrice(9.75, "EUR").

TypeScript im Browser: der Compiler von TypeScript 6.0.3, Apache-2.0, danach die eigene Engine Ihres Browsers. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Problem melden

Etwas ist falsch oder unklar? Beschreiben Sie es kurz, dann wird es geprüft und korrigiert.

#

Mindestens 20 Zeichen.

Nur, wenn Sie eine Antwort wünschen.

Kernideen

TypeScript ins Projekt installieren

TypeScript ist ein npm-Paket namens typescript. Sie brauchen also Node.js, das npm mitbringt. Führen Sie im Projektordner npm install -D typescript aus. -D, kurz für --save-dev, trägt es in package.json unter devDependencies ein: ein Werkzeug, das Sie beim Schreiben des Codes brauchen, keine Bibliothek, die das Programm lädt. npm legt den Befehl tsc im Projekt ab, und npx tsc führt genau diese Kopie aus. npx tsc --version gibt Version 7.0.2 aus, die neueste Version am 30. September 2026. Eine globale Installation, npm install -g typescript, geht auch, aber die TypeScript-Website empfiehlt eine pro Projekt: So behält jedes Projekt seine eigene Version, auf jedem Rechner.

TypeScript 7.0: ein natives tsc

TypeScript 7.0 ist eine native Portierung des Compilers, geschrieben in Go. Es prüft wie TypeScript 6.0, nimmt dieselben Kommandozeilenoptionen an und ist bei einem vollständigen Build typischerweise 8- bis 12-mal schneller. Sie installieren und starten es wie bisher, und es behält die Standardwerte, die 6.0 eingeführt hat, etwa dass strict eingeschaltet ist; darum geht es in der nächsten Lektion. Was 7.0 noch fehlt, ist eine programmatische API. Ein Werkzeug, das den Compiler aus seinem eigenen Code lädt, etwa typescript-eslint, braucht daher weiterhin 6.0 daneben. Der Editor auf dieser Seite prüft mit TypeScript 6.0.3, das für jedes Programm dieser Lektion dieselben Meldungen ausgibt.

tsc für ein ganzes Projekt ausführen

npx tsc ohne Dateinamen sucht tsconfig.json im aktuellen Ordner, dann in jedem übergeordneten Ordner, und prüft jede Datei, die die tsconfig einschließt, und jede Datei, die diese importieren. main.ts und die importierte format.ts werden also beide geprüft, und ein Fehler kann in jeder der beiden gemeldet werden. Mit der tsconfig des Kurses schreibt es keine Dateien; keine Ausgabe heißt keine Fehler. Findet tsc gar keine tsconfig.json, gibt es seinen Hilfetext aus und prüft nichts. Ein Import nennt die Datei mit Endung, import {formatPrice} from "./format.ts", denn node main.ts lädt genau diese Datei. Dann starten Sie das Programm: npx tsc, danach node main.ts, als zwei Befehle.

Quellen

Zuletzt geprüft am 30. September 2026