TypeScript

Das Typsystem in JavaScript ist dynamisch. Dies bedeutet, dass sich die Typen von Variablen oder von Parametern in Funktionen zur Laufzeit ändern können:

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

In obigem Beispiel wird die Funktion sum zuerst mit zwei Zahlen (Datentyp number) und dann mit einem String und einer Zahl aufgerufen.

Einerseits sorgt das dynamische Typsystem in JavaScript für einen relativ einfachen Einstieg und für Flexibilität. Andererseits kann es hierdurch in komplexeren Programmen zu unerwünschten oder sogar fehlerhaften Situationen zur Laufzeit führen.

Mit TypeScript kann JavaScript-Code mit statischen Typen ausgestattet werden. TypeScript überprüft ein Programm vor der Ausführung, sodass Fehler bereits vor der Laufzeit gefunden und behoben werden können.

Obiges Beispiel könnte in TypeScript so geschrieben werden:

let myVariable = 10; // number
// myVariable = "Hallo"; 
// obige Zeile auskommentiert --> Fehler in TypeScript!
 
let myVariable2 = 20;
 
function sum(a: number,b: number) {
  return a+b;
}
 
console.log(sum(8,12)); // --> 20
 
console.log(sum(myVariable,myVariable2)); // --> 30

Die Zuweisung des Strings "Hallo" an die Variable myVariable wurde auskommentiert, weil dies in TypeScript zu einem Fehler führen würde. Die Initialisierung von myVariable mit dem Wert 10 auf der vorigen Zeile legt den Typen der Variable auf number fest. Dieser Typ wird automatisch durch die Zuweisung ermittelt (dies wird Typinferenz genannt).

Durch eine erneute Zuweisung mit einem unzulässigen Wert (hier der String "Hallo") entsteht ein Fehler zur Programmierzeit, der direkt im Editor (replit.com oder VS Code) angezeigt wird.

Die Parameter der Funktion sum haben nun sogenannte Typannotationen (z.B. a: number) durch die der Typ eines Parameters festgelegt wird. Nun kann sum lediglich mit Parametern vom Typ number aufgerufen werden.

Nützlich ist auch die Möglichkeit, eigene Typen zu erstellen. Dadurch kann z.B. verhindert werden, dass Eigenschaften in Objekten fehlen oder unzulässige Werte erhalten. Dies kann in TypeScript z.B. mit einem interface erreicht werden:

// Typ Person deklarieren
interface Person {
  name: string,
  age: number
}
 
// Typ Person verwenden
const alice: Person = {
  name: 'Alice',
  age: 23
}
 
// führt zu Fehler im TypeScript-Compiler!
const bob: Person = {
  name: 'Bob',
  age: "23" // <-- muss number sein
}
 
// führt zu Fehler im TypeScript-Compiler!
const charlie: Person = {
  name: 'Charlie',
  // age fehlt hier!
}

TypeScript ist eine sehr mächtige Spracherweiterung mit vielen weiteren Funktionalitäten wie an der umfangreichen offiziellen Dokumentation zu sehen ist.

JavaScript-Code ist bereits gültiges TypeScript. Dies bedeutet, dass TypeScript in bestehenden JavaScript-Projekten nahtlos eingeführt werden kann. Der bestehende Code wird dann schrittweise mit TypeScript umgestellt.

replit.com hat ein TypeScript-Template für neue Projekte.

VS Code enthält standardmäßig Unterstützung für TypeScript, allerdings wird der TypeScript-Compiler nicht mitgeliefert. Dieser muss separat installiert werden. Informationen dazu, wie TypeScript in NodeJS bzw. VS Code verwendet wird, sind z.B. hier zu finden:

• https://nodejs.dev/en/learn/nodejs-with-typescript/
• https://code.visualstudio.com/docs/typescript/typescript-tutorial