# 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:

1) 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"

2) 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.

4) 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.