Aufwärmen · Aufgabe 1 von 7
// B2.1 · ca. 30 Min. · Einstieg
Primitive Typen, Arrays, any und unknown
Nach dieser Lektion annotieren Sie Text, Zahlen, Wahrheitswerte und Arrays und behandeln einen Wert unbekannten Typs mit unknown und typeof statt mit any.
Lektion 1 von 5 in B2 Alltägliche Typen
Anfang des ModulsWeiter
Danach können Sie
- Werte mit string, number und boolean annotieren und Arrays mit number[] oder Array<number>
- Erklären, was any mit der Typprüfung macht und warum strict (noImplicitAny) ein implizites any meldet
- unknown für einen Wert verwenden, dessen Typ noch nicht feststeht, und ihn vor der Verwendung mit typeof prüfen
Vorhersagen · Aufgabe 2 von 7
Sagen Sie es vorher, bevor Sie weiterlesen: data ist als any annotiert. Was meldet npx tsc?
let data: any = "hello"; data = 42; data.toUpperCase(); const total: number = data;Üben · Aufgabe 3 von 7
Ergänzen Sie den Typ: ein Array von Zahlen.
const temperatures: ____ = [18.5, 19.25, 21];const temperatures: = [18.5, 19.25, 21];Üben · Aufgabe 4 von 7
Diesmal ist value unknown. Was meldet tsc?
function shout(value: unknown) { return value.toUpperCase(); }Üben · Aufgabe 5 von 7
Ordnen Sie jedem Typ zu, was er erlaubt.
Denksport · Aufgabe 6 von 7
Knobelaufgabe. tsc meldet für diese Datei keine Fehler. Was gibt node main.ts aus?
const settings = JSON.parse('{"volume": 7}'); console.log(settings.volum.toFixed(1));Anwenden · Aufgabe 7 von 7
Mini-Aufgabe. Beschreiben Sie ein Album, das Sie mögen, mit vier annotierten Konstanten: einem Titel (string), einem Jahr (number), ob Sie es besitzen (boolean), und den Namen der Stücke (string[]). Schreiben Sie dann describe(value: unknown): string, das "text: " plus den Wert zurückgibt, wenn typeof sagt, dass es ein String ist, und sonst "not text". Geben Sie die Konstanten aus und rufen Sie describe für einen Stücknamen und für das Jahr auf. Führen Sie npx tsc aus, dann node main.ts. Ändern Sie zum Schluss unknown in any, entfernen Sie die typeof-Prüfung und sehen Sie, dass tsc sich über value nicht mehr beschwert.
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 Wetterstation mit einer unbekannten Eingabe
Name, Status, Messwerte und Bezeichnungen der Station sind mit den alltäglichen Typen annotiert. formatReading nimmt unknown, weil ein Sensor alles Mögliche schicken kann: Es verwendet value erst als Zahl, nachdem typeof bestätigt hat, dass es eine ist. Führen Sie npx tsc aus, das nichts ausgibt, dann node main.ts. Löschen Sie danach die if-Zeile und ihre schließende Klammer und führen Sie tsc erneut aus: Es meldet error TS18046 bei value.toFixed.
main.ts
// A weather station: annotated values, and one input whose type is unknown.
const station: string = "Berlin-Mitte";
const online: boolean = true;
const readings: number[] = [18.5, 19.25, 21];
const labels: Array<string> = ["morning", "noon", "evening"];
function formatReading(value: unknown): string {
if (typeof value === "number") {
return value.toFixed(1) + " degrees";
}
return "no reading";
}
console.log(station, "online:", online);
for (let i = 0; i < readings.length; i++) {
console.log(labels[i] + ":", formatReading(readings[i]));
}
console.log("sensor 4:", formatReading("offline"));
Ausführen mit
npx tsc
node main.tsAusgabe
Berlin-Mitte online: true
morning: 18.5 degrees
noon: 19.3 degrees
evening: 21.0 degrees
sensor 4: no reading- number[] und Array<string> sind die beiden Schreibweisen für einen Array-Typ; beide prüfen jedes Element.
- readings[i] ist eine Zahl und labels[i] ein String, weil ein Element den Elementtyp des Arrays hat.
- formatReading("offline") besteht die Prüfung, da unknown alles annimmt; die typeof-Prüfung führt zu "no reading".
- toFixed(1) rundet 19.25 auf 19.3 und schreibt 21 als 21.0.
Ä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 Playlist reparieren
Die Annotationen stimmen, aber tsc meldet in jedem Array ein falsches Element. Das dritte Stück heißt "7", ist 2.75 Minuten lang, und Sie mögen es. Korrigieren Sie die drei Werte so, dass sie zum Typ ihres Arrays passen. Lassen Sie die Annotationen und die Funktion, wie sie sind. Der erste Test 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
Führen Sie npx tsc aus: Jede Meldung nennt Zeile und Spalte eines falschen Elements.
Hinweis 2
Ein Titel ist Text, auch wenn er wie eine Zahl aussieht, braucht also Anführungszeichen. Eine Länge ist eine Zahl und darf keine haben.
Hinweis 3
Die korrigierten Werte sind "7", 2.75 und true.
Eine Lösung zeigen
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
export const titles: string[] = ["Intro", "Blue", "7"];
export const lengths: number[] = [3.5, 4, 2.75];
export const liked: boolean[] = [true, false, true];
export function totalMinutes(values: number[]): number {
let sum = 0;
for (const value of values) {
sum += value;
}
return sum;
}
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 const titles: string[] = ["Intro", "Blue", 7];
export const lengths: number[] = [3.5, 4, "2.75"];
export const liked: boolean[] = [true, false, "true"];
export function totalMinutes(values: number[]): number {
let sum = 0;
for (const value of values) {
sum += value;
}
return sum;
}
main.test.ts
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {titles, lengths, liked, totalMinutes} from './main.ts';
test('Der dritte Titel ist der Text "7"', () => {
assert.deepEqual(titles, ['Intro', 'Blue', '7'], 'titles sollte ["Intro", "Blue", "7"] sein, alles Text');
});
test('Die Playlist dauert 10.25 Minuten', () => {
assert.equal(totalMinutes(lengths), 10.25, `totalMinutes(lengths) sollte 10.25 sein, war aber ${JSON.stringify(totalMinutes(lengths))}`);
});
test('liked enthält nur true und false', () => {
assert.deepEqual(liked, [true, false, true], 'liked sollte [true, false, true] sein, ohne Text');
});
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
Von any zu unknown
describe nimmt any, also akzeptiert tsc value.length auch dann, wenn value eine Zahl ist, und describe(42) liefert Text of length undefined. Ändern Sie any in unknown und lesen Sie, was tsc meldet. Fügen Sie dann eine typeof-Prüfung hinzu, sodass Text "Text of length N" ergibt und jeder andere Wert "Not text".
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
Mit unknown meldet tsc error TS18046: 'value' is of type 'unknown'. Genau darum geht es: Jetzt verlangt es eine Prüfung.
Hinweis 2
typeof value === "string" ist nur für Text wahr. Innerhalb dieses if-Blocks ist value ein String.
Hinweis 3
Geben Sie im if "Text of length " + value.length zurück und danach "Not text".
Eine Lösung zeigen
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
export function describe(value: unknown): string {
if (typeof value === "string") {
return "Text of length " + value.length;
}
return "Not text";
}
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 describe(value: any): string {
return "Text of length " + value.length;
}
main.test.ts
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {describe} from './main.ts';
test('Text ergibt seine Länge', () => {
assert.equal(describe('hello'), 'Text of length 5', 'describe("hello") sollte "Text of length 5" sein');
});
test('Eine Zahl ist kein Text', () => {
assert.equal(describe(42), 'Not text', `describe(42) sollte "Not text" sein, war aber ${JSON.stringify(describe(42))}`);
});
test('Ein Array ist auch kein Text', () => {
assert.equal(describe(['a', 'b']), 'Not text', 'describe(["a", "b"]) sollte "Not text" 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 --testHäufige Fehler
String mit großem S
const city: String = "Berlin";
const upper: string = city;
console.log(upper);
Was tsc oder Node.js ausgibt
main.ts(2,7): error TS2322: Type 'String' is not assignable to type 'string'.Warum, und die Lösung
String mit großem S ist der Typ des String-Wrapper-Objekts von JavaScript, nicht der Typ von Text. tsc fügt eine zweite Zeile an: 'string' is a primitive, but 'String' is a wrapper object. Prefer using 'string' when possible. Dasselbe gilt für Number und Boolean. Schreiben Sie die Typen klein: const city: string = "Berlin".
Eine Zahl, wo ein Array gemeint war
const ids: number = [1, 2, 3];
console.log(ids);
Was tsc oder Node.js ausgibt
main.ts(1,7): error TS2322: Type 'number[]' is not assignable to type 'number'.Warum, und die Lösung
number ist eine einzelne Zahl; ein Array von Zahlen ist number[]. Die Meldung nennt, was gefunden wurde (number[]) und was die Annotation erwartet (number). Ergänzen Sie die Klammern: const ids: number[] = [1, 2, 3]. Oder lassen Sie die Annotation weg: TypeScript leitet number[] aus dem Wert ab.
Einen unknown-Wert ohne Prüfung verwenden
function shout(value: unknown): string {
return value.toUpperCase();
}
console.log(shout("hi"));
Was tsc oder Node.js ausgibt
main.ts(2,10): error TS18046: 'value' is of type 'unknown'.Warum, und die Lösung
unknown heißt „irgendein Wert, und ich habe noch nicht geprüft, welcher“, also erlaubt tsc keine Methode, keine Eigenschaft und keine Rechnung damit. Prüfen Sie zuerst: if (typeof value === "string") { return value.toUpperCase(); }, und geben Sie für andere Werte etwas anderes zurück. Wechseln Sie nicht zu any, um den Fehler stummzuschalten: Damit entfernen Sie genau die Prüfung, die er verlangt.
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.