Datentypen

• string
• number (sowohl Integer als auch Floats)
• boolean für Wahrheitswerte
• Date
• array (Beispiel: string[])
• object

Diese Datentypen existieren in JavaScript, meist jedoch nur implizit (language primitives), z. B. mit .toString() oder parseInt(). Mit TypeScript können wir diese explizit bzw. zum Typisieren nutzen.

Neue Datentypen mit TypeScript

• any
• unknown
• never
• void

Wieso überhaupt typisieren?

• Vermeidung von Laufzeitfehlern
• Genau wissen, welche Datentypen wo möglich sind
• Feste Struktur und Angaben, auch für spätere Weiterentwicklung

Beispiele: Explizites Typisieren

							let username: string;
							let age: number;
							let birthdate: Date;
							let isTrainee: boolean;
							let pets: string[];
							let thisCanBeAnything: any;
						

TypeScript Playground

Beispiele: Implizites Typsieren

							
								let username = 'Lea';

								let number = 42;

								let isBoolean = true;
							
						

Das funktioniert aber natürlich nur, wenn ein Wert zum Initialisieren bereits bekannt ist.

TypeScript Playground

Type-Checking

Wenn du den Typ unknown verwendest, kommst du um das Type-Checking nicht herum

							function makeIDtoString(id: unknown): string {
								if (typeof id === 'number') {
									return id.toString();
								} else if (typeof id === 'string') {
									return id;
								} else {
									return 'ID is malformed';
								}
							}
						

Im TypeScript Playground öffnen

Eigene Type Aliases erstellen

Eigene Type Aliases sind hilfreich, wenn man weiß, welche Werte der Typ annehmen kann oder welche für die Anwendung relevant sind.

							type Seasons = 'Spring' | 'Summer' | 'Autumn' | 'Winter';

							type FibonacciNumbers = 1 | 2 | 3 | 5 | 8 | 13 | 21; // ... 
						

Es gibt noch andere Wege, wie Type Aliases genutzt werden können: siehe Handbuch

Union Types

Es kommt vor, dass Variablen verschiedene Datentypen annehmen können, dann sind Union Types hilfreich

							
								const id: string | number;
							
						

Interfaces

Interfaces sind Beschreibungen von Objekten. Sie geben Aufschluss über die Struktur und Inhalte eines Objekts und können als Bauplan genutzt werden.

Sie sind dann besonders hilfreich, wenn komplexe Daten verarbeitet werden müssen oder Daten zusammengestellt werden.

Optionale Felder in einem Interface können mit einem ? markiert werden.

Beispiel

							
								interface Developer {
									age: number,
									name: string,
									favouriteMeals: string[],
									isTrainee: boolean,
									colleagues?: Developer[]
								}
							
						

Beispiel: Machen wir ein Objekt daraus

							
									const Lea: Developer = {
										age: 27,
										name: "Lea",
										favouriteMeals: ['Pizza', 'Salat', 'Kartoffelbrei' ],
										isTrainee: false,
										colleagues: [
											{ name: 'Cat', ... },
											{ name: 'Manfred', ... },
											...
										]
									}
							
						

TypeScript Playground

json2ts

Wenn man mit großen Datenmengen von außen (andere Teams, öffentliche APIs) arbeitet, kann es hilfreich sein, Interfaces generieren zu lassen. Das geht zum Beispiel mit json2ts.

Funktionen

Funktionen gibt es bereits in JavaScript, mit TypeScript können diese typsicherer gemacht werden.

							
								// JavaScript
								function sayName(name) {
									console.log('Your name is ' + name);
								}
							
						

							
								// TypeScript
								function sayName(name: string) {
									console.log('Your name is ' + name);
								}
							
						

Funktionen mit Union-Types

							
								function printId(id: number | string) {
									if (typeof id === "string") {
										// In this branch, id is of type 'string'
										console.log(id.toUpperCase());
									} else {
										// Here, id is of type 'number'
										console.log(id);
									}
								}
							
						

Quelle

Rückgabe typisieren

Rückgabewerte können natürlich auch typisiert werden

							
								function add(a: number, b: number): number {
									return a + b;
								}

								function showAdditionResult(a: number, b: number): void {
									console.log(a + b)
								}