Kodokon kodokon.com

Warum TypeScript, deine erste typisierte Datei

Entdecke, was TypeScript ist, welches Problem es löst, und schreibe deine allererste typisierte Datei.

6 Min. · 3 Fragen

Diese Lektion in Kodokon öffnen

Du kennst JavaScript bereits, die Sprache, die Webseiten interaktiv macht. TypeScript ist eine Erweiterung von JavaScript: Jeder gültige JavaScript-Code ist auch TypeScript-Code. Sein großer Zusatz sind Typen. Ein Typ beschreibt die Natur eines Werts: ein Text, eine Zahl, ein wahr oder falsch... Indem du den Typ deiner Variablen angibst, lässt du den Computer deinen Code prüfen, bevor er ausgeführt wird.

Warum ist das nützlich? In JavaScript hindert dich nichts daran, einen Text zu übergeben, wo eine Zahl erwartet wurde. Das Programm läuft trotzdem... und liefert ein absurdes Ergebnis, das oft erst viel später auffällt. Sieh dir dieses Beispiel an: Die Funktion erwartet einen Preis als Zahl, bekommt aber einen Text.

JAVASCRIPT
function addTax(price) {
  return price + price * 0.2;
}

const total = addTax("100");
console.log(total); // "10020" instead of 120!
In JavaScript bleibt dieser Fehler völlig unbemerkt.

Mit TypeScript fügst du eine Typannotation hinzu: einen Doppelpunkt gefolgt vom Typ, direkt hinter dem Namen eines Parameters oder einer Variable. TypeScript-Code wird anschließend kompiliert, also von einem Werkzeug namens Compiler (tsc) in normales JavaScript übersetzt. Genau in diesem Schritt werden Typfehler erkannt und gemeldet.

TYPESCRIPT
function addTax(price: number): number {
  return price + price * 0.2;
}

const total = addTax(100);
console.log(total); // 120
Hier würde addTax("100") schon vor der Ausführung abgelehnt.

Schreiben wir jetzt deine erste typisierte Datei. Eine TypeScript-Datei verwendet die Endung .ts statt .js. Darin schreibst du ganz normales JavaScript, angereichert mit Typannotationen.

TYPESCRIPT
let firstName: string = "Sarah";
let age: number = 28;

console.log(firstName + " is " + age + " years old.");
Deine erste Datei: hello.ts

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

  1. Was ist TypeScript im Verhältnis zu JavaScript?
    • Eine völlig andere Sprache als JavaScript
    • Eine Erweiterung von JavaScript, die Typen hinzufügt
    • Ein Werkzeug, um JavaScript schneller zu machen
    • Ein Webbrowser
  2. Was passiert, wenn du eine .ts-Datei kompilierst?
    • Sie wird in eine ganz normale JavaScript-Datei umgewandelt
    • Sie wird direkt vom Browser ausgeführt
    • Sie wird in eine HTML-Seite umgewandelt
  3. Was bedeutet die Annotation in let age: number?
    • Die Variable age ist immer null
    • Die Variable age kann nur Zahlen enthalten
    • Die Variable age ist ein Text
    • Die Variable age ist optional