Zusammenfassung
TypeScript ist eine Programmiersprache für das Web. Sie basiert auf JavaScript, fügt aber statische Typisierung hinzu — man legt beim Schreiben fest, welche Art von Daten in einer Variable gespeichert werden darf. Das verhindert viele häufige Fehler bereits während des Schreibens, nicht erst wenn der Code läuft. TypeScript-Dateien (
.ts) werden vom TypeScript-Compiler (tsc) in JavaScript (.js) übersetzt, weil Browser nur JavaScript verstehen. In dieser Vorlesung lernst du die Grundbausteine: Datentypen, Variablen, Literale und Operatoren.Schlüsselbegriffe
ECMAScript
Der offizielle Standard, dem JavaScript folgt. Die European Computer Manufacturers Association (ECMA) in Genf legt fest, was eine Web-Scripting-Sprache können muss. JavaScript ist die bekannteste Umsetzung dieses Standards.
TypeScript
Eine Erweiterung (Superset) von JavaScript. Alles, was in JavaScript geht, funktioniert auch in TypeScript. TypeScript fügt statische Typisierung hinzu und entstand zur Zeit von ECMAScript Version 6.
Statische Typisierung
Jede Variable hat einen festen Datentyp, der beim Schreiben des Codes festgelegt wird. Der Compiler kann dann prüfen, ob Typen korrekt verwendet werden — noch bevor das Programm läuft.
Compiler
Ein Programm, das Code von einer Sprache in eine andere übersetzt. Der TypeScript-Compiler (tsc) übersetzt .ts-Dateien in .js-Dateien, weil Browser kein TypeScript verstehen.
Datentyp
Beschreibt, welche Art von Werten eine Variable speichern kann und welche Operationen darauf möglich sind. Beispiele: number (Zahlen), string (Text), boolean (Wahr/Falsch).
Variable
Ein benannter Speicherplatz im Arbeitsspeicher. Wie eine Schachtel mit Etikett: Der Name ist das Etikett, der Typ beschreibt was rein darf, der Wert ist der Inhalt.
Konstante
Eine Variable, deren Wert nach der ersten Zuweisung nicht mehr verändert werden kann. In TypeScript mit const deklariert.
Literal
Ein direkt im Code hingeschriebener Wert. Beispiele: 42 (Number-Literal), true (Boolean-Literal), 'Hallo' (String-Literal).
Operator
Ein Symbol, das Werte verknüpft und einen neuen Wert erzeugt. Beispiele: + (Addition), === (Gleichheit mit Typprüfung), && (logisches Und).
Type Inference
Die automatische Typerkennung durch den TypeScript-Compiler. Wenn eine Variable direkt bei der Deklaration initialisiert wird, ermittelt TypeScript den Datentyp automatisch.
Tuple
Ein spezieller Array-Typ in TypeScript, der eine feste Anzahl von Elementen mit bekannten, aber potenziell unterschiedlichen Datentypen enthält (z. B. [string, number]).
Kernkonzepte
ECMAScript und TypeScript
Wie kam TypeScript zur Welt?
In den Anfängen des Web waren Webseiten statisch — reine HTML-Dokumente. Durch JavaScript wurden sie interaktiv: Formulare konnten validiert, Inhalte dynamisch geladen und Buttons mit Aktionen belegt werden. JavaScript ist die gängigste Umsetzung des ECMAScript-Standards, der von der ECMA-Organisation in Genf gepflegt wird.
Zur Zeit von ECMAScript Version 6 fügte Microsoft TypeScript hinzu. Das Hauptmerkmal: statische Typisierung. In reinem JavaScript kann eine Variable erst eine Zahl sein und dann plötzlich einen Text enthalten — TypeScript verhindert solche Fehler.
Klausurrelevant
TypeScript ist ein Superset von JavaScript: Jeder gültige JavaScript-Code funktioniert auch in TypeScript. TypeScript funktioniert jedoch nicht direkt in Browsern — es muss zuerst in JavaScript kompiliert (umgewandelt) werden.
Kompilieren: von TypeScript zu JavaScript
MeinCode.ts → [tsc Compiler] → MeinCode.js → [Browser]
TypeScript-Dateien erkennst du an der Endung
.ts, JavaScript-Dateien an .js. In modernen Entwicklungsumgebungen (z. B. WebStorm) läuft der Compiler automatisch im Hintergrund — nach fast jedem Tastendruck.In HTML wird das fertige JavaScript eingebunden:
<script src="meincode.js" defer></script>Das Attribut
defer sorgt dafür, dass das Skript erst ausgeführt wird, nachdem die gesamte HTML-Seite geladen wurde.Datentypen
Jedes Programm arbeitet mit Informationen aus der echten Welt. Ein Kunde hat einen Namen, eine Emailadresse, ein Alter. Diese Informationen müssen im Code abgebildet werden. Datentypen sind vereinfachte Abstraktionen dieser Wirklichkeit.
TypeScript unterscheidet zwischen primitiven und komplexen Typen:
| Kategorie | TypeScript-Typ | Bedeutung | Beispielwerte |
|---|---|---|---|
| Primitiv | number | Ganze und reelle Zahlen | 3, 8.14, -50, 0xff |
| Primitiv | boolean | Wahrheitswert | true, false |
| Primitiv | string | Text (Zeichenkette) | "Hallo", 'Welt' |
| Primitiv | enum | Feste Menge benannter Werte | enum Farbe {ROT, GRUEN, BLAU} |
| Komplex | number[] | Liste von Zahlen (Array) | [1, 2, 3, 5, 7] |
| Komplex | string[] | Liste von Texten (Array) | ["Anna", "Ben"] |
| Komplex | KlassenName | Objekt (mehr dazu später) | new User() |
Info
TypeScript fasst Ganzzahlen und Dezimalzahlen im Typ
number zusammen. Die Zahl 3 und 3.14 sind beide vom Typ number. Im Hintergrund werden sie nach dem IEEE 754-Standard als 64-Bit-Gleitkommazahlen gespeichert.Variablen und Konstanten
Eine Variable ist wie eine Schachtel:
- Das Etikett = der Name der Variable
- Die Beschreibung auf der Schachtel = der Datentyp
- Der Inhalt = der aktuelle Wert
// Deklaration + Initialisierung einer Konstante
const jahr: number = 2024;
// Deklaration + Initialisierung einer Variable
let name: string = "Manuel";
let isStudent: boolean = false;
// Erst deklarieren, dann initialisieren
let alter: number;
alter = 30;| Schlüsselwort | Bedeutung |
|---|---|
const | Konstante — Wert kann nach der Initialisierung nicht mehr geändert werden |
let | Variable — Wert kann beliebig oft geändert werden |
var | Veraltet — nicht verwenden! Verhält sich anders als erwartet |
Tipp
Konvention: Variablennamen werden in camelCase geschrieben — Wörter ohne Leerzeichen, jedes Folgewort mit Großbuchstaben:
firstName, isStudent, maxScore. Boolean-Variablen beginnen oft mit is oder has: isLoggedIn, hasPermission.Literale
Ein Literal ist ein direkt im Code hingeschriebener Wert:
// Boolean-Literale
true
false
// Number-Literale
42 // Ganzzahl
8.14 // Dezimalzahl
5e2 // Exponentialschreibweise: 500
0xff // Hexadezimale Zahl FF = 255
0b101 // Binäre Zahl 101 = 5
// String-Literale (alle gleichwertig)
"Text" // Doppelte Anführungszeichen
'Text' // Einfache Anführungszeichen
// Template String (mit Variablen)
`Hallo ${name}, du bist ${alter} Jahre alt!`Template Strings (mit Backtick
`) sind besonders nützlich, weil man Variablen direkt per ${variable} einfügen kann.Operatoren
Arithmetische Operatoren (für number)
| Operator | Bedeutung | Beispiel |
|---|---|---|
+ | Addition | 3 + 4 → 7 |
- | Subtraktion | 10 - 3 → 7 |
* | Multiplikation | 3 * 4 → 12 |
/ | Division | 10 / 4 → 2.5 |
** | Potenz | 2 ** 8 → 256 |
% | Modulo (Rest) | 10 % 3 → 1 |
++ | Inkrement (+1) | i++ (entspricht i = i + 1) |
-- | Dekrement (-1) | i-- (entspricht i = i - 1) |
let x: number = 10;
x += 5; // x = x + 5 = 15 (Kurzschreibweise)
x -= 3; // x = x - 3 = 12
x *= 2; // x = x * 2 = 24Vergleichsoperatoren (Ergebnis: boolean)
| Operator | Bedeutung | Beispiel |
|---|---|---|
> | Größer als | 5 > 3 → true |
< | Kleiner als | 2 < 1 → false |
>= | Größer oder gleich | 5 >= 5 → true |
<= | Kleiner oder gleich | 4 <= 3 → false |
== | Gleichheit (ohne Typprüfung) | "3" == 3 → true |
=== | Gleichheit mit Typprüfung | "3" === 3 → false |
!= | Ungleichheit | 5 != 3 → true |
!== | Ungleichheit mit Typprüfung | "3" !== 3 → true |
Klausurrelevant
Immer
=== statt == verwenden! Der dreifache Gleichheitsoperator prüft auch den Typ. "3" == 3 ergibt true (beide werden zu Zahlen verglichen), "3" === 3 ergibt false (String ≠ Number). Das doppelte == führt zu unerwarteten Ergebnissen.Logische Operatoren (für boolean)
| Operator | Bedeutung | Beispiel |
|---|---|---|
&& | Und: beide müssen true sein | true && false → false |
|| | Oder: mindestens eines muss true sein | true || false → true |
! | Nicht: kehrt den Wahrheitswert um | !true → false |
String-Operator
let vorname: string = "Max";
let nachname: string = "Muster";
let vollerName: string = vorname + " " + nachname; // "Max Muster"
vollerName += " M.Sc."; // "Max Muster M.Sc."Array-Zugriff
let prim: number[] = [2, 3, 5, 7, 11, 13];
console.log(prim[0]); // 2 (Index beginnt bei 0!)
console.log(prim[2]); // 5
prim[0] = 42; // Wert an Index 0 überschreiben
console.log(prim.length); // 6 (Anzahl der Elemente)Lernkarten
Übungsfragen
Welches Schlüsselwort verwendet man für eine Variable, deren Wert sich nicht ändern darf?
Was ergibt '5' === 5 in TypeScript?
Welcher TypeScript-Datentyp wird für Zahlen verwendet (sowohl ganze als auch Dezimalzahlen)?
Wie schreibt man in TypeScript eine Variable namens 'maximaleAnzahl' nach der camelCase-Konvention?
Was ist das Ergebnis des Ausdrucks true || false in TypeScript?