Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

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

Compilerfehler lesen: von der Meldung zur Korrektur

Nach dieser Lektion lesen Sie jede Meldung von tsc, beurteilen den Vorschlag "Did you mean" und arbeiten mehrere Fehler vom ersten an ab, bis zu der Zeile, die sie verursacht.

Lektion 4 von 5 in B1 Einrichtung und Grundlagen

Danach können Sie

  • Eine Meldung lesen: Position, TS-Code, Text, die eingerückte zweite Zeile und die Terminalform
  • Fehler bei Namen, Eigenschaften und Argumenten beheben und einen Vorschlag "Did you mean" beurteilen
  • Mehrere Fehler vom ersten an beheben, eine Ursache in einer Zeile ohne Fehler finden und tsc erneut ausführen

  1. Aufwärmen · Aufgabe 1 von 7

    Aufwärmen aus der ersten Lektion: tsc gibt main.ts(5,20): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'. aus. Was trifft zu? Wählen Sie alle zutreffenden.

    Wählen Sie alle zutreffenden aus.

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher, bevor Sie weiterlesen: Welche Zeilen meldet tsc für diese main.ts?

    let total = "0";
total++;
const doubled: number = total * 2;
console.log(total.toFixed(2), doubled);

  3. Üben · Aufgabe 3 von 7

    In der Schleife stand sum += prise, und tsc meldete main.ts(4,10): error TS2552: Cannot find name 'prise'. Did you mean 'price'? Setzen Sie den Namen ein, damit tsc den Code annimmt und er 7 ausgibt.

    const prices = [3, 4];
let sum = 0;
for (const price of prices) {
  sum += ____;
}
console.log(sum);
    sum += ;

  4. Üben · Aufgabe 4 von 7

    Dasselbe Programm. Sie dürfen eine Zeile ändern. Mit welcher Änderung meldet tsc überhaupt keine Fehler mehr?

    let total = "0";
total++;
const doubled: number = total * 2;
console.log(total.toFixed(2), doubled);

  5. Üben · Aufgabe 5 von 7

    tsc gibt main.ts(7,19): error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'number[]'. und darunter eine eingerückte Zeile aus. Was steht in der eingerückten Zeile?

    function total(prices: number[]): number {
  let sum = 0;
  for (const p of prices) sum += p;
  return sum;
}
const cart = ["3.5", "4.25"];
console.log(total(cart));

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. Für diese Datei meldet tsc einen Fehler: main.ts(2,30): error TS1005: ')' expected. Sie ergänzen die fehlende ) und führen npx tsc erneut aus. Wie viele Fehler meldet es jetzt?

    const count: number = "3";
console.log("count is", count;
const label: string = 5;

  7. Anwenden · Aufgabe 7 von 7

    Kleine Aufgabe. Legen Sie dieses Programm in main.ts ab und führen Sie npx tsc aus (oder prüfen Sie es im Editor). Es soll Fence: 13 m ausgeben. Beheben Sie nur die erste Meldung, führen Sie tsc erneut aus und wiederholen Sie das, bis tsc nichts mehr ausgibt. Notieren Sie, wie viele Fehler jeder Lauf gemeldet hat. Führen Sie dann node main.ts aus.

    function perimeter(width: number, height: number): number {
  return 2 * (width + height);
}

let label = "Fence";
const sides = [4, 2.5];
const metres: number = "m";
console.log(lable + ":", perimeter(sides[0]), metres);

    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

Eine Ursache, zwei Meldungen

In der ersten Fassung dieses Programms lautete die Zeile let total = 0; noch let total = "0";. tsc meldete dann main.ts(6,25): error TS2362 für total * 1.19 und main.ts(8,29): error TS2551 für total.toFixed(2), mit Did you mean 'fixed'?. Keine der beiden zeigte auf die Deklaration, und total += price wurde angenommen, weil man eine Zahl an Text anhängen darf. "0" in 0 zu ändern, behob beide. Führen Sie npx tsc aus, das nichts ausgibt, dann node main.ts. Setzen Sie danach die Anführungszeichen wieder ein und lesen Sie beide Meldungen selbst.

main.ts

const prices: number[] = [3.5, 4.25, 2];
let total = 0;
for (const price of prices) {
  total += price;
}
const withTax: number = total * 1.19;
console.log("items:", prices.length);
console.log("total:", total.toFixed(2));
console.log("with tax:", withTax.toFixed(2));

Ausführen mit

npx tsc
node main.ts

Ausgabe

items: 3
total: 9.75
with tax: 11.60
  • Die Positionen in der Einleitung beziehen sich auf diese Datei: Zeile 6 enthält die Multiplikation, Zeile 8 den Aufruf von toFixed und Zeile 2 die Ursache.
  • total += price besteht die Prüfung auch dann, wenn total Text ist; der erste Fehler erscheint deshalb erst bei der Multiplikation.
  • Der Vorschlag 'fixed' ist eine echte String-Methode, aber ihr Aufruf gäbe keine Zahl mit zwei Nachkommastellen aus.
  • Gibt tsc nichts aus, ist das das Signal für node main.ts.
Ä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 Liste abarbeiten

Dieses Programm soll Kitchen has 7 letters ausgeben, dann Floors: 1, dann Area: 12 m2 (der Raum ist 4 mal 3 Meter groß). tsc meldet drei Fehler. Führen Sie die Tests oder npx tsc aus, beheben Sie die erste Meldung, prüfen Sie erneut und machen Sie weiter, bis die Typprüfung besteht. Ändern Sie nur, worauf die Meldungen zeigen.

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

    Die erste Meldung ist main.ts(6,7): error TS2322: Type 'string' is not assignable to type 'number'. "1" in Anführungszeichen ist Text.

  2. Hinweis 2

    Die zweite endet mit Did you mean 'length'? Hier stimmt der Vorschlag.

  3. Hinweis 3

    Expected 2 arguments, but got 1. heißt, dass area auch die Höhe braucht: area(4, 3).

Eine Lösung zeigen

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

function area(width: number, height: number): number {
  return width * height;
}

let room = "Kitchen";
const floors: number = 1;
console.log(room, "has", room.length, "letters");
console.log("Floors:", floors);
console.log("Area:", area(4, 3), "m2");
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

function area(width: number, height: number): number {
  return width * height;
}

let room = "Kitchen";
const floors: number = "1";
console.log(room, "has", room.lenght, "letters");
console.log("Floors:", floors);
console.log("Area:", area(4), "m2");

main.test.ts

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

test('das Programm gibt die drei Zeilen aus', async () => {
  const out = (await runMain()).trimEnd();
  assert.equal(out, 'Kitchen has 7 letters\nFloors: 1\nArea: 12 m2', `das Programm gab ${JSON.stringify(out)} aus`);
});

test('die Flächenzeile benutzt beide Seiten des Raums', async () => {
  const out = await runMain();
  assert.match(out, /Area: 12 m2/, 'die letzte Zeile sollte Area: 12 m2 lauten');
});

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

Die Ursache beheben, nicht das Symptom

Dieses Programm soll Total: 8 und Average: 2.7 ausgeben. Es gibt Total: 0251 und Average: 83.7 aus, und tsc meldet einen Fehler, in Zeile 6. count in Zeile 6 in Number() zu packen, bringt tsc zum Schweigen, aber die Ausgabe bleibt falsch. Finden Sie die Zeile, die count zu Text macht, beheben Sie den Fehler dort und prüfen Sie, dass tsc und die Tests bestehen.

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

    Die Meldung ist main.ts(6,25): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type. Die linke Seite ist count.

  2. Hinweis 2

    Warum ist count keine Zahl? Sehen Sie nach, wo count seinen ersten Wert bekommt.

  3. Hinweis 3

    In Zeile 1 macht "0" in Anführungszeichen count zum String, also hängt count + n Text an. Schreiben Sie let count = 0;.

Eine Lösung zeigen

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

let count = 0;
const items = [2, 5, 1];
for (const n of items) {
  count = count + n;
}
const average: number = count / items.length;
console.log("Total:", count);
console.log("Average:", average.toFixed(1));
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

let count = "0";
const items = [2, 5, 1];
for (const n of items) {
  count = count + n;
}
const average: number = count / items.length;
console.log("Total:", count);
console.log("Average:", average.toFixed(1));

main.test.ts

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

test('die Summe ist 8', async () => {
  const out = await runMain();
  assert.match(out, /^Total: 8$/m, `erwartet war die Zeile Total: 8, das Programm gab ${JSON.stringify(out)} aus`);
});

test('der Durchschnitt ist 2.7', async () => {
  const out = await runMain();
  assert.match(out, /^Average: 2\.7$/m, `erwartet war die Zeile Average: 2.7, das Programm gab ${JSON.stringify(out)} aus`);
});

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 "Did you mean" übernehmen, das nicht passt

const prices: number[] = [3.5, 4.25, 2];
let total = "0";
for (const price of prices) {
  total += price;
}
const withTax: number = total * 1.19;
console.log("items:", prices.length);
console.log("total:", total.toFixed(2));
console.log("with tax:", withTax.toFixed(2));

Was tsc oder Node.js ausgibt

main.ts(8,29): error TS2551: Property 'toFixed' does not exist on type 'string'. Did you mean 'fixed'?

Warum, und die Lösung

tsc schlägt eine ähnlich geschriebene String-Methode vor, weil total ein String ist. toFixed in fixed umzubenennen, bestünde in dieser Zeile die Prüfung und gäbe Text in <tt>-Tags statt 9.75 aus. Lesen Sie zuerst den Typ in der Meldung: on type 'string' sagt Ihnen, dass total gar kein String sein sollte. Die Ursache ist Zeile 2: Schreiben Sie let total = 0;, und beide Fehler, in den Zeilen 6 und 8, verschwinden.

Hinter einem Syntaxfehler nach Typfehlern suchen

const count: number = "3";
console.log("count is", count;
const label: string = 5;

Was tsc oder Node.js ausgibt

main.ts(2,30): error TS1005: ')' expected.

Warum, und die Lösung

Solange eine Klammer fehlt, kann tsc die Datei nicht lesen: Es meldet nur den Syntaxfehler und sagt nichts über Typen. Das heißt nicht, dass die Zeilen 1 und 3 stimmen. Ergänzen Sie die ) in Zeile 2, Spalte 30, führen Sie npx tsc erneut aus und beheben Sie dann die zwei Typfehler, die erscheinen: count bekommt 3 ohne Anführungszeichen, und label bekommt "5" oder einen anderen Typ.

Eine Funktion mit einem fehlenden Argument aufrufen

function area(width: number, height: number): number {
  return width * height;
}
console.log(area(3));

Was tsc oder Node.js ausgibt

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

Warum, und die Lösung

In JavaScript wird ein fehlendes Argument stillschweigend zu undefined, und 3 * undefined gibt NaN aus. TypeScript zählt die Argumente gegen die Parameter und meldet den Aufruf. Spalte 13 ist die Stelle, an der area beginnt. Übergeben Sie beide Werte: area(3, 4).

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

Eine Meldung, von links nach rechts gelesen

main.ts(7,19): error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'number[]'. sind die Datei, Zeile 7, Spalte 19 (wo der falsche Ausdruck beginnt), der Fehlercode und der Text. In "X is not assignable to Y" ist X, was tsc gefunden hat, und Y, was der Code verlangt. Eine eingerückte Zeile darunter, etwa Type 'string' is not assignable to type 'number'., nennt den Teil, der nicht passt. Im Terminal gibt npx tsc die Meldungen farbig aus, als main.ts:7:19 - error TS2345: ..., mit der Codezeile und ~~~ unter der Stelle, und endet mit einer Zählung wie Found 3 errors in the same file, starting at: main.ts:2. Dieser Kurs zitiert die einzeilige Form.

"Did you mean" ist eine Vermutung über die Schreibweise

Viele Meldungen benennen das Problem genau. Cannot find name 'prise'. Did you mean 'price'? (TS2552) ist ein Name, den es nicht gibt, Property 'lenght' does not exist on type 'string'. Did you mean 'length'? (TS2551) eine Eigenschaft, die der Typ nicht hat, und Expected 2 arguments, but got 1. (TS2554) ein Aufruf mit zu wenigen. Der Vorschlag ist ein vorhandener Name, der fast gleich geschrieben wird. Meist ist es Ihr Tippfehler. Aber bei total.toFixed(2), wenn total Text ist, schlägt tsc 'fixed' vor, eine String-Methode, die Text in <tt>-Tags setzt: Der eigentliche Fehler ist, dass total ein String ist. Lesen Sie den Typ in der Meldung, bevor Sie den Vorschlag übernehmen.

Mehrere Fehler: den ersten zuerst, dann tsc erneut

tsc listet die Fehler in der Reihenfolge der Datei. Beheben Sie den ersten und führen Sie npx tsc erneut aus: Die Liste kann sich ändern. Ein falscher Wert kann Fehler in anderen Zeilen auslösen. Bei let total = "0" meldet tsc die Zeilen 2, 3 und 4, in denen total als Zahl benutzt wird, aber nicht Zeile 1, in der der Fehler steckt. Nennen mehrere Meldungen dieselbe Variable, sehen Sie nach, wo sie ihren Wert bekommt. Ein Syntaxfehler wie ')' expected. kann den Rest verdecken: tsc meldet dann nur ihn, und nach der Korrektur erscheinen die Typfehler in anderen Zeilen. Gibt tsc nichts aus, ist kein Fehler mehr übrig.

Quellen

Zuletzt geprüft am 30. September 2026