// B3.4 · ca. 30 Min. · Einstieg
Nach dieser Lektion machen Sie aus einem Typ voller optionaler Properties eine Discriminated Union, grenzen sie mit if, switch, gestapelten cases und result.ok ein und destrukturieren sie, ohne das Eingrenzen zu verlieren.
Danach können Sie
Aufwärmen · Aufgabe 1 von 7
const kind: string = "image";
const out: string[] = [];
switch (kind) {
case "text":
out.push("text");
case "image":
case "attachment":
out.push("media");
case "link":
out.push("link");
break;
default:
out.push("other");
}
console.log(out.join(" "));Vorhersagen · Aufgabe 2 von 7
interface Shape {
kind: "circle" | "square";
radius?: number;
sideLength?: number;
}
function getArea(shape: Shape) {
if (shape.kind === "circle") {
return Math.PI * shape.radius ** 2;
}
return 0;
}Üben · Aufgabe 3 von 7
type Sent = { ok: true; id: number } | { ok: ____; error: string };
function report(result: Sent): string {
if (result.ok) {
return "sent #" + result.id;
}
return "failed: " + result.error;
}
console.log(report({ ok: true, id: 7 }));
console.log(report({ ok: false, error: "offline" }));Üben · Aufgabe 4 von 7
type Text = { type: "text"; body: string };
type Image = { type: "image"; url: string; width: number };
type Attachment = { type: "attachment"; name: string; bytes: number };
type Message = Text | Image | Attachment;
type Ok = { ok: true; id: number };
type Failed = { ok: false; error: string };
type Sent = Ok | Failed;
Üben · Aufgabe 5 von 7
type Text = { type: "text"; body: string };
type Image = { type: "image"; url: string; width: number };
type Attachment = { type: "attachment"; name: string; bytes: number };
type Message = Text | Image | Attachment;
function label(m: Message): string {
let text = "";
switch (m.type) {
case "text":
text = m.body;
case "image":
text += m.url;
break;
case "attachment":
text = m.name;
}
return text;
}Denksport · Aufgabe 6 von 7
type Fetched = { error: Error; data: null } | { error: null; data: string[] };
function names(r: Fetched): number {
if (r.error) throw r.error;
return r.data.length;
}Anwenden · Aufgabe 7 von 7
Prüfen Sie Ihr Ergebnis anhand dieser Liste
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
Drei Arten von Nachrichten teilen sich eine Property type mit einem anderen Literal in jedem Mitglied. preview stapelt die beiden Medien-cases, kopiert die Diskriminante in eine const, um sie zu unterscheiden, und überlässt Text dem default. send meldet das Ergebnis mit der booleschen Diskriminante ok. Führen Sie npx tsc aus, dann node main.ts. Ändern Sie danach const { type } in let { type } und führen Sie tsc erneut aus.
main.ts
// A chat client: one object type per kind of message, told apart by "type".
type Text = { type: "text"; body: string };
type Image = { type: "image"; url: string; width: number };
type Attachment = { type: "attachment"; name: string; bytes: number };
type Message = Text | Image | Attachment;
// A boolean discriminant: ok says which of the two you have.
type Sent = { ok: true; id: number } | { ok: false; error: string };
function preview(m: Message): string {
switch (m.type) {
case "image":
case "attachment": {
// m is Image | Attachment here
const { type } = m; // a const copy of the discriminant still narrows m
if (type === "image") return "[image, " + m.width + " px]";
return "[file " + m.name + ", " + Math.ceil(m.bytes / 1024) + " KB]";
}
default:
// only Text is left
return '"' + (m.body.length > 20 ? m.body.slice(0, 20) + "..." : m.body) + '"';
}
}
let nextId = 1;
function send(m: Message): Sent {
if (m.type === "text" && m.body.trim() === "") return { ok: false, error: "empty text" };
if (m.type === "attachment" && m.bytes > 5_000_000) return { ok: false, error: "file over 5 MB" };
return { ok: true, id: nextId++ };
}
const outbox: Message[] = [
{ type: "text", body: "Are we still on for Friday at noon?" },
{ type: "image", url: "/pics/cat.png", width: 640 },
{ type: "text", body: " " },
{ type: "attachment", name: "notes.pdf", bytes: 48_213 },
{ type: "attachment", name: "film.mp4", bytes: 912_000_000 },
];
for (const m of outbox) {
const result = send(m);
if (result.ok) {
console.log("#" + result.id + " " + preview(m));
} else {
console.log("not sent (" + result.error + "): " + preview(m));
}
}
Ausführen mit
npx tsc
node main.tsAusgabe
#1 "Are we still on for ..."
#2 [image, 640 px]
not sent (empty text): " "
#3 [file notes.pdf, 48 KB]
not sent (file over 5 MB): [file film.mp4, 890625 KB]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.
Übung 1 von 2
Delivery ist ein einziger Typ mit optionalen Properties, also meldet tsc error TS18048: 'd.store' is possibly 'undefined', obwohl label zuerst method prüft. Lassen Sie label unverändert. Ersetzen Sie Delivery durch eine Discriminated Union aus zwei exportierten Typen, Pickup (ein Laden) und Courier (eine Adresse und ein Stockwerk), jeder mit Pflichtdaten.
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.
Die Prüfung in label ist in Ordnung. Der Typ muss sagen, dass eine Abholung immer einen Laden hat und eine Kurierlieferung immer eine Adresse und ein Stockwerk.
Schreiben Sie zwei Objekttypen, jeden mit method auf ein Literal gesetzt, "pickup" oder "courier", und ohne Fragezeichen.
export type Pickup = { method: "pickup"; store: string }; dann Courier genauso, und export type Delivery = Pickup | Courier;
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
export type Pickup = { method: "pickup"; store: string };
export type Courier = { method: "courier"; address: string; floor: number };
export type Delivery = Pickup | Courier;
export function label(d: Delivery): string {
if (d.method === "pickup") {
return "Pick up at " + d.store.toUpperCase();
}
return "Courier to " + d.address + ", floor " + d.floor.toFixed(0);
}
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 type Delivery = {
method: "pickup" | "courier";
store?: string;
address?: string;
floor?: number;
};
export function label(d: Delivery): string {
if (d.method === "pickup") {
return "Pick up at " + d.store.toUpperCase();
}
return "Courier to " + d.address + ", floor " + d.floor.toFixed(0);
}
main.test.ts
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {label} from './main.ts';
test('eine Abholung nennt den Laden in Großbuchstaben', () => {
const text = label({method: 'pickup', store: 'Mitte'});
assert.equal(text, 'Pick up at MITTE', `label einer Abholung ergab ${JSON.stringify(text)}`);
});
test('eine Kurierlieferung nennt Adresse und Stockwerk', () => {
const text = label({method: 'courier', address: 'Hauptstr. 5', floor: 3});
assert.equal(text, 'Courier to Hauptstr. 5, floor 3', `label einer Kurierlieferung ergab ${JSON.stringify(text)}`);
});
test('das Erdgeschoss ist Stockwerk 0', () => {
const text = label({method: 'courier', address: 'Ring 1', floor: 0});
assert.equal(text, 'Courier to Ring 1, floor 0', `label einer Lieferung ins Erdgeschoss ergab ${JSON.stringify(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
parsePort liefert ein PortResult. describePort liest sofort result.port, und tsc meldet error TS2339: Property 'port' does not exist on type 'PortResult'. Sorgen Sie dafür, dass describePort für "8080" "port 8080" liefert und, wenn das Parsen scheitert, "invalid: " gefolgt vom Grund.
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.
PortResult hat zwei Mitglieder, und nur das mit ok: true hat einen port. Was müssen Sie zuerst prüfen?
if (!result.ok) grenzt result auf das Mitglied mit reason ein. Nach einem return in diesem Zweig bleibt nur das Mitglied mit port übrig.
if (!result.ok) { return "invalid: " + result.reason; } dann return "port " + result.port;
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
export type PortResult = { ok: true; port: number } | { ok: false; reason: string };
export function parsePort(text: string): PortResult {
const port = Number(text);
if (!Number.isInteger(port)) return { ok: false, reason: "not a whole number" };
if (port < 1 || port > 65535) return { ok: false, reason: "out of range" };
return { ok: true, port };
}
export function describePort(text: string): string {
const result = parsePort(text);
if (!result.ok) {
return "invalid: " + result.reason;
}
return "port " + result.port;
}
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 type PortResult = { ok: true; port: number } | { ok: false; reason: string };
export function parsePort(text: string): PortResult {
const port = Number(text);
if (!Number.isInteger(port)) return { ok: false, reason: "not a whole number" };
if (port < 1 || port > 65535) return { ok: false, reason: "out of range" };
return { ok: true, port };
}
export function describePort(text: string): string {
const result = parsePort(text);
return "port " + result.port;
}
main.test.ts
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {describePort} from './main.ts';
test('ein gültiger Port wird beschrieben', () => {
assert.equal(describePort('8080'), 'port 8080', 'describePort("8080") sollte "port 8080" sein');
});
test('Text, der keine Zahl ist, liefert seinen Grund', () => {
assert.equal(describePort('abc'), 'invalid: not a whole number', 'describePort("abc") sollte "invalid: not a whole number" sein');
});
test('eine Zahl außerhalb von 1 bis 65535 liefert ihren Grund', () => {
assert.equal(describePort('70000'), 'invalid: out of range', 'describePort("70000") sollte "invalid: out of range" sein');
assert.equal(describePort('0'), 'invalid: out of range', 'describePort("0") sollte "invalid: out of range" 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 --testtype Text = { type: "text"; body: string };
type Image = { type: "image"; url: string; width: number };
type Attachment = { type: "attachment"; name: string; bytes: number };
type Message = Text | Image | Attachment;
function icon(m: Message): string {
switch (m.type) {
case "text":
return "T";
case "imgae":
return "I";
default:
return "F";
}
}
console.log(icon({ type: "image", url: "/a.png", width: 10 }));
Was tsc oder Node.js ausgibt
main.ts(10,10): error TS2678: Type '"imgae"' is not comparable to type '"attachment" | "image" | "text"'.Warum, und die Lösung
Ein case-Wert muss einer der Literal-Typen der Diskriminante sein, und tsc zählt die erlaubten auf. Schreiben Sie case "image". Ohne tsc würde das Programm laufen und für jedes Bild still F ausgeben, weil der falsch geschriebene case nie passt.
type Text = { type: "text"; body: string };
type Image = { type: "image"; url: string; width: number };
type Attachment = { type: "attachment"; name: string; bytes: number };
type Message = Text | Image | Attachment;
function link(m: Message): string {
let { type } = m;
if (type === "image") {
return m.url;
}
return "";
}
console.log(link({ type: "image", url: "/a.png", width: 10 }));
Was tsc oder Node.js ausgibt
main.ts(9,14): error TS2339: Property 'url' does not exist on type 'Message'.Warum, und die Lösung
tsc hält die Verbindung zwischen type und m nur bei einer const (oder einem Parameter, der nie neu zugewiesen wird): Ein let könnte zum Zeitpunkt der Prüfung einen anderen Wert haben. Schreiben Sie const { type } = m; oder prüfen Sie direkt m.type.
type Sent = { ok: true; id: number } | { ok: false; error: string };
function report({ ok, id }: Sent): string {
return ok ? "sent #" + id : "failed";
}
console.log(report({ ok: true, id: 7 }));
Was tsc oder Node.js ausgibt
main.ts(3,23): error TS2339: Property 'id' does not exist on type 'Sent'.Warum, und die Lösung
Ein Destrukturierungsmuster läuft vor jeder Prüfung, also darf es nur Properties nehmen, die jedes Mitglied hat. ok steht in beiden Mitgliedern, id nicht. Nehmen Sie das ganze Objekt, prüfen Sie ok und lesen Sie dann result.id: function report(result: Sent) { return result.ok ? "sent #" + result.id : "failed"; }.
TypeScript im Browser: der Compiler von TypeScript 6.0.3, Apache-2.0, danach die eigene Engine Ihres Browsers. Lizenz und Quellcode
5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.
Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.