JavaScript Quiz Teil 4: Typescript
Ziel
Umstellung von Javascript auf Typescript

1. Setup
Lade den Inhalt dieses Repositorys als ZIP-Datei herunter. Entpacke sie und lege sie in dein WebProg2Abgabe Repository, in den Ordner /quiz-v4/. Kopiere nun zusätzlich alle Dateien aus /quiz-v3/ in diesen Ordner.
node.js  installieren
Teste ob das geklappt hat:
$ node -v
v24.0.1
$ npm -v
11.3.0
Es sollte keine Fehlermeldungen geben, und die Versionsnummern sollten
(im Mai 2025) nicht kleiner sein als die hier gezeigten.
node Projekt starten, Typescript installieren
Im Ordner quiz-v4:


Starte ein node Projekt mit
npm init -y


Nun exisitert eine Datei package.json.  Überprüfe die Datei:

wurde die Haupt-Javascript-Datei richtig erkannt (eintrag bei "main")
gibt es den Eintrag   "type": "module"



Installiere den Typescript Transpiler:
npm install typescript --save-dev


Nun existiert eine Datei package-lock.json und ein
Ordner node_modules mit mehr als 20 Megabyte.

Die Konfigurationsdatei tsconfig.json ist bereits für dich angelegt.

Die .js Dateien in .ts umbenennen
Benenne die .js Dateien in .ts um.
Den Typescript Transpiler verwenden
Mit dem Kommandozeilen-Befehl npx kann man Programme starten,
die mit npm installiert wurden. Der Typescript Compiler heisst tsc.
Also startet man so den Typescript Compiler:
npx tsc
Falls es geklappt hat erzeugt er die Javascript-Dateien *.js und
die Sourcemaps *.js.map.
Aber wahrscheinlich klappt es nicht auf anhieb, da ja noch viele
Typ-Deklarationen fehlen.
2. Aufgabenstellung
Stelle den gesamten Code in src/ auf TypeScript um. Füge sinnvolle Typen hinzu (string, number, eigene Types, boolean, etc.). So lange, bis keine Compiler-Warnungen mehr angezeigt werden und das Projekt im Browser ohne Fehler funktioniert.
Verwende TypeScript-Features (z.B. type, private, HTMLElement, HTMLButtonElement, usw.). Füge außerdem eine Question-Typdefinition hinzu.
Startpunkt:
Beginne bei quiz.ts und arbeite dich zu timer.ts, question.ts und script.ts vor.
Beachte:
Keine Änderung der HTML- oder CSS-Dateien nötig. Verwende strict mode (ist in tsconfig.json aktiviert).

Automatisches Kompilieren mit tsc --watch
Beim Entwickeln ist es mühsam, bei jeder Codeänderung manuell npx tsc auszuführen. Nutze daher den Watch-Modus des TypeScript-Compilers:
npx tsc --watch
Damit überwacht der Compiler alle .ts-Dateien im Projekt und übersetzt sie automatisch bei jeder Änderung neu in den dist/-Ordner.
Tipp: als NPM-Script hinterlegen
Füge in deiner package.json im Abschnitt "scripts" folgendes hinzu:
"scripts": {
    "watch": "tsc --watch"
}
Dann kannst du den Watch-Modus einfach mit folgendem Befehl starten:
npm run watch

Dateiliste
Sowohl am Webspace, als auch auf Gitlab



Datei
Hinweis




index.html
Enthält das Quiz.


./css
Ordner für Stylesheets. Enthält mindestens styles.css


./scripts/script.js
Lädt weitere Module. Stellt Verbindung von


./scripts/script.ts
Lädt weitere Module. Stellt Verbindung von DOM und Quiz-Klasse her. Entrypoint, wird in index.html eingebunden


./scripts/questions.ts
Lädt die Fragen, exportiert asynchrone Funktion getQuestions


./scripts/quiz.ts
exportiert die Klasse QuizApp


/dist
Die *.js und *.js.map Dateien, die vom TypeScript Compiler erstellt werden.



Hinweis:
In Git speicherst du nur die TypeScript-Dateien (/src).
Auf den Webspace lädst du die JavaScript-Dateien aus /dist hoch.