Skip to Content
Programmieren9 - CodequalitätTypeScript

TypeScript

Dauer: 30 Minuten

Ziel: TypeScript als praktischen Qualitätscheck im Node.js-Projekt einrichten

Diese Lektion beschreibt nur den praktischen Einstieg mit TypeScript im Projekt. Eine vollständige Einführung in die umfangreiche Sprache TypeScript ist nicht Teil dieser Lektion.

JavaScript ist dynamisch typisiert. Das ist flexibel, kann aber in größeren Projekten zu Laufzeitfehlern führen, die erst spät auffallen.

Mit TypeScript  können viele dieser Probleme bereits vor dem Start des Programms gefunden werden.

TypeScript ist eine Spracherweiterung für JavaScript: JavaScript-Code bleibt gültig, wird aber um statische Typinformationen ergänzt. Der Einsatz ist optional, in JavaScript-Projekten jedoch sehr nützlich und in der Praxis weit verbreitet.

Motivation: typischer JavaScript-Effekt

let myVariable = 10; // number
myVariable = "Hallo"; // string
 
let myVariable2 = 20;
 
function sum(a, b) {
  return a + b;
}
 
console.log(sum(8, 12)); // 20
console.log(sum(myVariable, myVariable2)); // Hallo20

Dieses Verhalten ist in JavaScript erlaubt, führt in größeren Projekten aber oft zu schwer auffindbaren Fehlern.

Minimal-Setup für ein bestehendes Projekt

npm install -D typescript @types/node tsx
npx tsc --init

tsc ist der TypeScript-Compiler. Mit npx tsc --init wird eine tsconfig.json-Datei erstellt. In dieser sollten mindestens diese Optionen geprüft werden:

{
  "compilerOptions": {
    "module": "nodenext", // Import-System: Node.js mit ES-Modules
    "target": "esnext", // Welche JS-Features als bekannt gelten (neuester Stand)
    "strict": true, // Strenge Typprüfung – fängt mehr Fehler ab
    "skipLibCheck": true, // Typen aus node_modules nicht prüfen (schneller)
    "esModuleInterop": true, // Ältere npm-Pakete (CJS) normal importierbar machen
    "allowJs": true, // Auch .js-Dateien im Projekt erlauben (nicht nur .ts)
    "allowImportingTsExtensions": true, // Imports mit .ts-Endung erlauben
    "noEmit": true // Keine Dateien erzeugen – nur Fehler anzeigen
  },
  "include": ["src"] // Nur Dateien im src/-Ordner prüfen
}

Mit dieser tsconfig-Konfiguration sollte der Quellcode des Projekts im Ordner src liegen, damit tsc alle relevanten Dateien prüft.

npm-Script-Einträge für das Projekt in package.json:

{
  "scripts": {
    "start": "tsx --env-file=.env src/main",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "typecheck": "tsc"
  }
}

Kurz erklärt:

  • npm run start: startet das TUI-Projekt lokal direkt mit tsx aus dem TypeScript-Code.
  • npm run typecheck: führt tsc als Typprüfung aus; mit noEmit: true werden dabei keine JS-Dateien erzeugt.

Für dieses TUI-Projekt wird lokal kein separater JavaScript-Build erzeugt. Der Code wird mit tsx direkt als TypeScript ausgeführt.

Bei Web-Projekten ist das anders: Browser führen JavaScript aus, daher wird TypeScript dort in der Regel vor dem Deployment in JavaScript übersetzt (oft inklusive Bundling).

Typfehler früh erkennen

function sum(a: number, b: number): number {
  return a + b;
}
 
sum(4, 5);      // ok
// sum("4", 5); // Fehler: string ist kein number

Kleines Beispiel

interface Contact {
  id: number;
  name: string;
  email?: string;
}
 
function findContactById(contacts: Contact[], id: number): Contact | undefined {
  return contacts.find((c) => c.id === id);
}
 
const alice: Contact = {
  id: 1,
  name: 'Alice',
};
 
// TypeScript-Fehler, weil id number sein muss:
const bob: Contact = {
  id: "2",
  name: 'Bob',
};

Wenn id oder contacts falsch verwendet werden, zeigt TypeScript den Fehler frühzeitig im Editor oder beim typecheck.

VS Code unterstützt TypeScript direkt und zeigt Typfehler bereits im Editor an (z. B. mit roten Wellenlinien und Einträgen in der Problems-Ansicht).

TypeScript kann im Projekt schrittweise eingeführt werden. Einzelne Dateien können als .ts ergänzt werden, parallel zum bestehenden JavaScript-Code.

Lernmaterial

Einführung und TestpyramideLinting mit ESLint