Aufgabe 01 - TypeScript-Spickzettel

Aufgabe 01 - TypeScript-Spickzettel

Worum geht es?

Sie richten die Werkzeugkette des Jahres ein (Node.js, npm, TypeScript) und erstellen Ihren persönlichen Spickzettel der Sprachkonstrukte: eine kompakte, selbst getestete Referenz, die Sie durch alle weiteren Übungen begleitet (siehe Kapitel JavaScript und TypeScript). Der Lerneffekt liegt im Weg dorthin: Jedes Konstrukt wird einmal selbst getippt, ausgeführt und in eigenen Worten beschrieben.

Was Sie dafür brauchen

• Kapitel JavaScript und TypeScript vollständig; Kapitel npm: Pakete und Projekte, Abschnitte package.json und Abhängigkeiten.
• Node.js (LTS), VS Code, ein Terminal.

Welche Kompetenzen Sie erwerben und zeigen

• Sie richten ein Node-/TypeScript-Projekt selbstständig ein und führen Code aus.
• Sie beherrschen die Grundkonstrukte und modernen Sprachmittel von JavaScript/TypeScript.
• Sie dokumentieren technisches Wissen als brauchbares Nachschlagewerk.

Pädagogische Einordnung

• Reproduktion: Werkzeuge nach Anleitung einrichten, Konstrukte wiedergeben (Teil A).
• Reorganisation und Transfer: Konstrukte auf eigene Beispiele anwenden und strukturieren (Teile B und C).
• Reflexion, Problemlösung und Urteilsbildung: ein zusammengesetztes Problem typisiert lösen und Entwurfsentscheidungen begründen (Teil D).

Arbeitsaufträge

Die Übung ist auf etwa zwei Stunden ausgelegt. Teil D ist der Expertenteil.

Teil A - Setup und Projekt

1. Installieren Sie Node.js und prüfen Sie node --version und npm --version.
2. Legen Sie einen Projektordner an: npm init -y, dann npm install --save-dev typescript tsx und npx tsc --init.
3. Schreiben Sie hello.ts (Ausgabe mit Template-Literal) und führen Sie es mit npx tsx hello.ts aus. Kompilieren Sie es zusätzlich einmal mit npx tsc und sehen Sie sich die erzeugte .js-Datei an: Was hat der Compiler entfernt?
4. Sehen Sie sich die entstandene package.json an und beantworten Sie schriftlich: Warum sind typescript und tsx unter devDependencies gelandet und nicht unter dependencies? Was bedeutet das Zeichen ^ vor der Versionsnummer?
5. Ergänzen Sie zwei eigene Einträge unter scripts: "dev": "tsx hello.ts" und "typecheck": "tsc --noEmit". Prüfen Sie beide mit npm run dev und npm run typecheck.
6. Legen Sie eine .gitignore mit node_modules/ an. Beantworten Sie in je einem Satz, warum dieser Ordner nicht ins Repository gehört, die package-lock.json dagegen schon.
7. Machen Sie die Probe aufs Exempel: Löschen Sie node_modules/ und stellen Sie den Zustand mit npm ci wieder her. Notieren Sie, woher npm ci weiß, welche Versionen zu installieren sind.

Teil B - Der Spickzettel

Erstellen Sie eine Tabelle (Markdown) mit je einem selbst getesteten Mini-Beispiel für:

1. const und let (und wann welches),
2. if/else if/else und der Vergleich mit ===,
3. for...of über ein Array und die klassische while-Schleife,
4. Funktionsdeklaration und Arrow Function (mit einem Satz dazu, wann Sie welche Schreibweise wählen),
5. Array: anlegen, push, length, includes,
6. map, filter und reduce an einer Zahlenliste,
7. Objektliteral: anlegen, Punktzugriff, Feld ergänzen,
8. Template-Literal mit eingebettetem Ausdruck.

Jedes Beispiel läuft vor dem Eintragen in der Node-REPL oder per tsx. Ungeprüfte Beispiele haben auf dem Zettel nichts verloren.

Teil C - Das Neue

Schreiben Sie je ein lauffähiges, kommentiertes Mini-Beispiel für:

1. import/export über zwei Dateien (denken Sie an "type": "module" oder tsx),
2. Destructuring von Objekt und Array, auch in einer Parameterliste; dazu je einmal Umbenennen ({ filename: name }) und Standardwert ({ fps = 25 }),
3. Spread zum Kopieren und Zusammenführen ({ ...object, field: value }) sowie Rest (...values) als Parameter; zeigen Sie am laufenden Beispiel, dass die Kopie flach ist: Ändern Sie in der Kopie ein verschachteltes Array und beobachten Sie das Original,
4. ?. und ??, inklusive eines Falls, in dem || das Falsche täte (0 als gültiger Wert!),
5. ein interface Clip (Dateiname, Dauer in Sekunden, optionale fps) und eine Funktion, die nur dieses Interface akzeptiert; zeigen Sie mit einem absichtlichen Tippfehler im Feldnamen, wie der Compiler reagiert.

Teil D - Expertenteil: typisierte Auswertung

1. Erweitern Sie das Interface Clip um tags: string[] und schreiben Sie longestPerTag(clips: Clip[]): Map<string, Clip>: je Tag der längste Clip.
2. Definieren Sie type ClipState = "raw" | "editing" | "approved", erweitern Sie Clip darum und schreiben Sie countByState(clips: Clip[]): Record<ClipState, number>. Beobachten Sie, wie der Compiler auf einen vergessenen Zustand im Ergebnisobjekt reagiert.
3. Lösen Sie eine der beiden Funktionen einmal mit Schleife und einmal mit map/filter/reduce; vergleichen Sie beide Fassungen in zwei Sätzen.
4. Begründen Sie in drei Sätzen, welche Prüfungen aus Punkt 1 und 2 TypeScript zur Compile-Zeit übernimmt und was ohne Typen erst zur Laufzeit (oder nie) aufgefallen wäre.

Wissenscheck

1. Was ist der Unterschied zwischen == und ===, und warum ist nur eines davon erlaubt?
2. Wann liefert value ?? "x" etwas anderes als value || "x"?
3. Was gehört von node_modules/, package.json und package-lock.json ins Repository, und warum?
4. Was unterscheidet npm install von npm ci, und wofür ist welcher Befehl gedacht?
5. Was prüft TypeScript beim Kompilieren, was bleibt Laufzeitverhalten?
6. Was bedeutet der Fehler Property 'durationSeconds' is missing in type ...?

Abgabe

Projektordner als Git-Repository (mit .gitignore), Spickzettel als cheatsheet.md, die Beispieldateien aus Teil C und gegebenenfalls Teil D.