Aufwärmen · Aufgabe 1 von 7
// B1.1 · ca. 30 Min. · Einstieg
Warum statische Typen: Fehler finden, bevor das Programm läuft
Nach dieser Lektion wissen Sie, was tsc vor dem Programmstart prüft, setzen Typannotationen dort, wo sie nötig sind, und beheben mit einer Meldung wie error TS2322 die Zeile, die sie nennt.
Lektion 1 von 5 in B1 Einrichtung und Grundlagen
Anfang des ModulsWeiter
Danach können Sie
- Erklären, was tsc vor dem Programmstart prüft und warum node main.ts allein keine Typen prüft
- Variablen und Parameter annotieren und Annotationen weglassen, wo TypeScript den Typ ableitet
- Eine Meldung von tsc lesen: Datei, Zeile und Spalte, den TS-Code und den Text
Vorhersagen · Aufgabe 2 von 7
Sagen Sie es vorher, bevor Sie weiterlesen: Sie führen npx tsc für diese main.ts aus. Was meldet es?
function double(n: number) { return n * 2; } console.log(double("21"));Üben · Aufgabe 3 von 7
Setzen Sie den Typ von width ein, damit tsc die Funktion akzeptiert und sie 12 ausgibt.
function area(width: ____, height: number): number { return width * height; } console.log(area(3, 4));function area(width: , height: number): number {Üben · Aufgabe 4 von 7
Hier ist nichts annotiert. Was meldet tsc?
let price = 4.5; price = "free";Üben · Aufgabe 5 von 7
tsc gibt main.ts(5,20): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'. aus. Ordnen Sie jedem Teil zu, was er Ihnen sagt.
Denksport · Aufgabe 6 von 7
Knobelaufgabe. tsc lehnt diese Datei ab, aber Sie überspringen tsc und führen node main.ts aus. Was gibt es aus?
const count: number = "3"; console.log(count + 1);Anwenden · Aufgabe 7 von 7
Mini-Aufgabe. Schreiben Sie eine Funktion formatPrice, die einen Betrag und eine Währung nimmt und Text wie 4.50 EUR zurückgibt (amount.toFixed(2) liefert die zwei Nachkommastellen). Annotieren Sie beide Parameter und den Rückgabetyp und rufen Sie die Funktion einmal mit console.log auf. Prüfen Sie das im Editor, oder mit npx tsc und node main.ts, wenn Sie TypeScript installiert haben. Übergeben Sie dann "4.5" statt 4.5 und lesen Sie die Meldung.
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 geprüfte Einkaufssumme
Dieses Programm addiert drei Preise und schlägt 19 % Steuer auf. Das Array und die Parameter der Funktion sind annotiert; total nicht, weil TypeScript aus dem ersten Wert number ableitet. Führen Sie npx tsc aus: Es gibt nichts aus, also gibt es keine Fehler. Dann node main.ts. Übergeben Sie probeweise "0.19" als Steuersatz und starten Sie tsc erneut. Die nächste Lektion installiert TypeScript 7.0; der Editor auf dieser Seite prüft mit TypeScript 6.0, das für jedes Programm dieser Lektion dieselben Fehler meldet.
main.ts
// A shopping total. tsc checks every use of these values before node runs them.
const prices: number[] = [3.5, 4.25, 2];
let total = 0; // no annotation: TypeScript infers number
function addTax(amount: number, rate: number): number {
return amount * (1 + rate);
}
for (const price of prices) {
total += price;
}
console.log("items:", prices.length);
console.log("total:", total);
console.log("with 19% tax:", addTax(total, 0.19).toFixed(2));
Ausführen mit
npx tsc
node main.tsAusgabe
items: 3
total: 9.75
with 19% tax: 11.60- number[] bedeutet ein Array aus Zahlen; Text in prices einzufügen wäre ein Typfehler.
- total hat keine Annotation, und trotzdem behandelt TypeScript es überall darunter als Zahl.
- Wenn Node.js die Datei ausführt, sind die Annotationen weg: Die Ausgabe ist die, die dasselbe JavaScript liefern würde.
- toFixed(2) liefert Text mit zwei Nachkommastellen; deshalb zeigt die letzte Zeile 11.60.
Ä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 Parameter annotieren
Diese Funktion funktioniert in JavaScript, aber tsc lehnt sie ab: Parameter 'width' implicitly has an 'any' type, und dasselbe für height. Annotieren Sie beide Parameter als Zahlen, dazu den Rückgabetyp. 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
Hinweis 1
Eine Annotation steht nach dem Namen, mit Doppelpunkt: width: number.
Hinweis 2
Der Rückgabetyp steht nach der schließenden Klammer der Parameterliste: (…): number {
Hinweis 3
Die fertige erste Zeile lautet export function area(width: number, height: number): number {
Eine Lösung zeigen
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
export function area(width: number, height: number): number {
return width * height;
}
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 area(width, height) {
return width * height;
}
main.test.ts
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {area} from './main.ts';
test('area(3, 4) ist 12', () => {
assert.equal(area(3, 4), 12, 'area(3, 4) sollte 12 sein');
});
test('area(2.5, 2) ist 5', () => {
assert.equal(area(2.5, 2), 5, 'area(2.5, 2) sollte 5 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.tsPrüfungen ausführen (learnrun.js muss im selben Ordner liegen):
npx tsc
node --testÜbung 2 von 2
Beheben, was tsc meldet
Dieses Programm soll Points: 42 ausgeben, gibt aber Points: 402 aus, und tsc meldet zwei Fehler. Starten Sie die Tests oder npx tsc, gehen Sie zu jeder Zeile und Spalte, die die Meldungen nennen, und korrigieren Sie dort die Werte. Lassen Sie die Funktion, wie sie ist: Sie stimmt.
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
Hinweis 1
Die erste Meldung ist main.ts(6,7): error TS2322. Zeile 6 speichert Text in einer Variablen, die als number annotiert ist.
Hinweis 2
Die zweite, in Zeile 7, betrifft saved: TypeScript hat aus "40" den Typ string abgeleitet.
Hinweis 3
Entfernen Sie die Anführungszeichen: Zahlen schreibt man ohne, als 40 und 2.
Eine Lösung zeigen
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
export function addPoints(a: number, b: number): number {
return a + b;
}
const saved = 40;
const bonus: number = 2;
console.log("Points:", addPoints(saved, bonus));
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 addPoints(a: number, b: number): number {
return a + b;
}
const saved = "40";
const bonus: number = "2";
console.log("Points:", addPoints(saved, bonus));
main.test.ts
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';
import {addPoints} from './main.ts';
test('addPoints(40, 2) ist 42', () => {
assert.equal(addPoints(40, 2), 42, 'addPoints(40, 2) sollte 42 sein');
});
test('das Programm gibt Points: 42 aus', async () => {
const out = (await runMain()).trimEnd();
assert.equal(out, 'Points: 42', `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.tsPrüfungen ausführen (learnrun.js muss im selben Ordner liegen):
npx tsc
node --testHäufige Fehler
Text in einer Variablen, die als Zahl annotiert ist
let count: number = 0;
count = "1";
console.log(count);
Was tsc oder Node.js ausgibt
main.ts(2,1): error TS2322: Type 'string' is not assignable to type 'number'.Warum, und die Lösung
count ist eine Zahl und kann darum immer nur Zahlen aufnehmen. "1" in Anführungszeichen ist Text. Zeile 2, Spalte 1 ist die Stelle, an der der Text zugewiesen wird. Schreiben Sie count = 1 ohne Anführungszeichen. Wenn Sie wirklich Text in eine Zahl umwandeln müssen, tun Sie das mit Number("1").
Ein Parameter ohne Typ
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Ada"));
Was tsc oder Node.js ausgibt
main.ts(1,16): error TS7006: Parameter 'name' implicitly has an 'any' type.Warum, und die Lösung
Mit strict rät TypeScript nicht, was ein Parameter enthält, und macht ihn auch nicht stillschweigend zu any, was die Prüfung für ihn abschalten würde. Sagen Sie, was Sie erwarten: function greet(name: string). Dann wird auch der Aufruf greet("Ada") geprüft.
Ein Tippfehler im Methodennamen
let city = "Berlin";
console.log(city.toUppercase());
Was tsc oder Node.js ausgibt
main.ts(2,18): error TS2551: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?Warum, und die Lösung
Namen unterscheiden Groß- und Kleinschreibung, und TypeScript kennt jede Methode eines Strings. Es meldet den Tippfehler, bevor das Programm läuft, und schlägt den richtigen Namen vor. Ohne tsc stoppt node main.ts erst, wenn es die Zeile erreicht, mit TypeError: city.toUppercase is not a function. Schreiben Sie toUpperCase.
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.