Vorraussetzung
Installation der folgenden Komponenten:
NodeJS
Konsolenbefehle
npm init -y // erstellt die package.json und bestätigt alles mit y
npm install typescript --save-dev // Mit Typescript entwickeln - fügt in package.json eine devDependencies hinzu
npx tsc --init // Erzeugt tsconfig.json (enthält z.B. die Ecma-Script-Version)
npx tsc --watch // Schaut nach Änderungen
node src/hello.js // Interpretiert das Javascript damit wir keinen Browser brauchen mit Node kann man aufs Dateisystem zugreifen
npm installiert pakete
npx temporäres Paket
Aufgabe 1: Klassen & Methoden
Baue eine Klasse die etwas zurückgibt bei folgendem Code
let s: Student = new Student();
let label:string = s.getLabel(123457);
console.log(label); // "Student mit Matrikelnummer: 123456"
Lösung 1
class Student {
oldNumber:number = -1;
getLabel(matNr:number):string {
if (matNr == 123456)
{
this.oldNumber = matNr;
let zusammenGebaut = "Die Nr. " + this.oldNumber;
return zusammenGebaut;
}
else
{
return `Student mit Matrikelnummer: ${matNr}`;
}
}
}
Aufgabe 2: Konstrukturen
Sorge dafür, dass diese Ausgabe über einen Konstruktor funktioniert
let s: Student = new Student("Max", 123456);
let label: string = s.getLabel();
console.log(label); // "Student Max mit Matrikelnummer: 123456";
Lösung 2
class Student {
name: string;
mNr: number;
constructor(_name: string, _mNr: number) {
this.name = _name;
this.mNr = _mNr;
}
getLabel() {
return `Student ${this.name} mit Matrikelnummer ${this.mNr}`;
}
}
Aufgabe 3: Auslagern in andere Dateien
Lagere die Klasse Student in eine andere Datei aus, so dass sie mit den folgenden Kommandos wieder instanziert werden kann
import {Student} from "./student"
let s: Student = new Student("Max", 123456);
let label: string = s.getLabel();
console.log(label); // "Student Max mit Matrikelnummer: 123456";
Lösung 3
Lege die Klasse student.js im gleichen Verzeichnis wie hello.js an und kopiere die Student-Klasse von Lösung 2 rein:
export class Student {
oldNumber:number = -1;
name: string;
mNr: number;
constructor(_name: string, _mNr: number) {
this.name = _name;
this.mNr = _mNr;
}
getLabel() {
return `Student ${this.name} mit Matrikelnummer ${this.mNr}`;
}
}
Aufgabe 4: ESLint für sauberen Code
Säubere den Code mit ESLint
Ansatz 4
Führe die folgenden Konsolenbefehle aus um ESLint zu verwenden:
npm init @eslint/config
npx eslint src/hello.ts
Beobachtung 4
ESLint meckert:
Lösung 4
Ändere den Code so, dass aus den Variablen aus Lösung 3 anstelle von let das Keyword const verwendet wird:
import {Student} from "./student"
const s: Student = new Student("Max", 123456);
const label: string = s.getLabel();
console.log(label); // "Student Max mit Matrikelnummer: 123456";