TypeScript

Simple Types

TypeScript erweitert JavaScript, indem es Typisierung und weitere Programmierkonstruktionen hinzufügt. Die einfachen Typen in TypeScript sind direkt von JavaScript abgeleitet und umfassen number, string, boolean, null und undefined. TypeScript fügt auch den Typ any hinzu, der jede Art von Wert annehmen kann, und unknown, der eine sicherere Alternative zu any darstellt.

Die einfache Typisierung in TypeScript ermöglicht es, Variablen, Parametern und Rückgabewerten von Funktionen explizite Typen zuzuweisen. Dies verbessert die Codequalität und -wartbarkeit, indem Fehler bereits bei der Kompilierung erkannt werden, statt zur Laufzeit aufzutreten.

let age: number = 25 // numerischer Typ
let name: string = 'Alice' // Zeichenkettentyp
let isActive: boolean = true // Boolescher Typ

Aufgabe: Deklariere Variablen für verschiedene Alltagsobjekte und weise ihnen explizite Typen zu. Überlege, welche Daten am besten mit welchem Typ beschrieben werden können. Beispiele könnten ein isActive-Flag für einen Benutzerstatus oder eine title-Zeichenkette für einen Buchtitel sein.

Special Types

TypeScript bietet einige spezielle Typen, die in JavaScript nicht vorhanden sind: null und undefined sind zwar aus JavaScript bekannt, werden in TypeScript jedoch oft in speziellen Kontexten verwendet, wie in strikten Null-Check-Modi. Der void-Typ wird verwendet, um anzugeben, dass eine Funktion keinen Rückgabewert hat. never ist ein Typ, der für Werte verwendet wird, die nie auftreten.

function logMessage(message: string): void {
  console.log(message)
}

function error(message: string): never {
  throw new Error(message)
}

void ist nützlich für Funktionen wie logMessage, die einen Seiteneffekt haben (z.B. das Schreiben in eine Konsole), aber keinen Wert zurückgeben. never wird in Funktionen wie error verwendet, die das Programm beenden oder eine Ausnahme werfen und daher keinen Wert zurückgeben.

Aufgabe: Schreibe eine Funktion configure, die entweder eine Konfiguration anwendet oder im Fehlerfall eine Ausnahme wirft. Verwende void und never, um die Rückgabetypen entsprechend zu kennzeichnen.

Arrays

Arrays sind eine fundamentale Struktur in jeder Programmiersprache, so auch in TypeScript. TypeScript erlaubt es, den Typ der Elemente innerhalb des Arrays zu spezifizieren, was die Integrität und Sicherheit des Codes erhöht.

let numbers: number[] = [1, 2, 3, 4, 5]
let names: Array<string> = ['Alice', 'Bob', 'Charlie']

Die Typisierung von Arrays kann entweder durch die Verwendung von Typ[] oder Array<Typ> erfolgen. Beide Formen sind äquivalent, aber Typ[] ist in der Community beliebter.

Aufgabe: Erstelle ein Array von students, wobei jeder Student durch ein Objekt mit name und age repräsentiert wird. Füge mindestens drei Studenten hinzu und schreibe Funktionen, um Studenten hinzuzufügen und zu entfernen.

Tuples

Tupel sind eine Erweiterung der Array-Struktur, die es ermöglichen, eine feste Anzahl von Elementen mit bekannten Typen in einem Array zu speichern. Dies ist besonders nützlich in Szenarien, wo ein Array spezifische Daten mit verschiedenen Typen halten soll.

let user: [string, number]
user = ['Alice', 25] // korrekt
user = [25, 'Alice'] // Fehler: Typen stimmen nicht überein

Tupel sind strikt bezüglich der Reihenfolge und Typ der Elemente. Jedes Element im Tupel hat einen festen Typ, der bei der Deklaration des Tupels spezifiziert wird.

Aufgabe: Erstelle ein Tuple für ein RGB-Farbmodell, das drei numerische Werte für Rot, Grün und Blau hält. Schreibe Funktionen, um die Farbwerte zu lesen und zu setzen.

Object Types

In TypeScript können auch Objekttypen explizit definiert werden. Dies ermöglicht es, die Struktur von Objekten genau festzulegen, was die Wartbarkeit und Verständlichkeit des Codes verbessert.

type User = {
  name: string
  age: number
  isActive: boolean
}

let user: User = {
  name: 'Alice',
  age: 25,
  isActive: true
}

Durch die Definition eines type können Sie komplexe Strukturen mit mehreren Feldern erstellen und wiederverwenden.

Enums

Enums (enumerations) bieten in TypeScript eine Möglichkeit, eine Gruppe von verwandten Werten unter einem gemeinsamen Typ zu bündeln. Enums sind besonders nützlich, wenn Sie mit einer festen Menge von Werten arbeiten, die innerhalb eines Programms klar definiert sind.

enum Color {
  Red,
  Green,
  Blue
}

let c: Color = Color.Green

In diesem Beispiel definiert Color einen neuen Enum-Typ mit drei möglichen Werten: Red, Green und Blue. TypeScript weist diesen Werten standardmäßig die Zahlen 0, 1 und 2 zu, aber Sie können diese Werte auch explizit setzen.

Aufgabe: Definiere einen Enum für die Wochentage. Verwende diesen Enum, um Funktionen zu schreiben, die überprüfen, ob ein bestimmter Tag ein Wochenende ist.

Aliases & Interfaces

In TypeScript können Sie komplexe Typen mit Hilfe von Aliases und Interfaces definieren. Beide bieten flexible Möglichkeiten, die Struktur von Objekten festzulegen, aber sie haben unterschiedliche Anwendungsfälle und Funktionalitäten.

Type Aliases erlauben Ihnen, einen benutzerdefinierten Typ mit einem Namen zu versehen. Sie können mit Primitiven, Unions, Tuples, Arrays und anderen Typen verwendet werden.

type Point = {
  x: number
  y: number
}

function printCoord(pt: Point) {
  console.log(`Die Koordinate ist (${pt.x}, ${pt.y}).`)
}

Interfaces sind ähnlich wie Type Aliases, bieten aber erweiterte Möglichkeiten wie das Erweitern von anderen Interfaces und können in Klassen implementiert werden.

interface Point {
  x: number
  y: number
}

interface Point3D extends Point {
  z: number
}

function print3DCoord(pt: Point3D) {
  console.log(`Die 3D-Koordinate ist (${pt.x}, ${pt.y}, ${pt.z}).`)
}

Aufgabe: Erstelle ein Interface für ein Fahrzeug, das Eigenschaften wie make, model und year enthält. Erweitere dieses Interface in einem ElectricVehicle-Interface, das zusätzlich eine Eigenschaft für die Akkukapazität hat.

Union Types

Union Types sind eine mächtige Funktion in TypeScript, die es ermöglicht, Variablen und Funktionen so zu definieren, dass sie mehr als einen Typ annehmen können. Dies erhöht die Flexibilität des Codes.

type StringOrNumber = string | number

function printId(id: StringOrNumber) {
  if (typeof id === 'string') {
    console.log(`Ihre ID ist: ${id.toUpperCase()}.`)
  } else {
    console.log(`Ihre ID ist: ${id}.`)
  }
}

In diesem Beispiel akzeptiert die Funktion printId sowohl string als auch number als Typ für den Parameter id. Innerhalb der Funktion können Sie den Typ überprüfen und entsprechend unterschiedlich behandeln.

Aufgabe: Schreibe eine Funktion formatDate, die ein Datum entweder als Date-Objekt oder als String akzeptiert und es in einem einheitlichen Format ausgibt.

Functions

Funktionen in TypeScript können genauso wie in JavaScript verwendet werden, aber mit dem zusätzlichen Vorteil der Typisierung von Parametern und Rückgabewerten.

function greet(name: string): string {
  return `Hallo, ${name}!`
}

let greeting = greet('Alice')
console.log(greeting)

TypeScript stellt sicher, dass die Funktion greet einen String erhält und einen String zurückgibt. Dies verhindert Laufzeitfehler, die durch unerwartete Datentypen verursacht werden könnten.

Aufgabe: Erstelle eine Funktion, die ein Array von Zahlen annimmt und die Summe zurückgibt. Stelle sicher, dass die Funktion korrekt typisiert ist und sowohl das Array als auch die Rückgabe überprüft werden.

Casting

Type Casting (auch bekannt als Type Assertion in TypeScript) ist der Prozess, bei dem Sie den Typ eines Objekts explizit deklarieren. Dies wird oft genutzt, wenn Sie mehr über den Typ wissen als der TypeScript-Compiler.

let someValue: any = 'Das ist ein String'
let strLength: number = (someValue as string).length

In diesem Beispiel verwenden wir as string, um TypeScript mitzuteilen, dass someValue tatsächlich ein String ist, auch wenn sein Typ als any definiert wurde.

Aufgabe: Gegeben sei ein Array mit any-Elementen, das sowohl Strings als auch Zahlen enthält. Schreibe eine Funktion, die nur die Strings herausfiltert und deren Längen in einem neuen Array zurückgibt. Nutze Type Assertions, um sicherzustellen, dass nur Operationen auf Strings ausgeführt werden.

Classes

Klassen in TypeScript erweitern die Möglichkeiten von JavaScript-Klassen durch das Hinzufügen von Typen und Modifikatoren wie public, private und protected. Klassen bieten eine klare Struktur für umfangreichere Codebasen.

class Point {
  x: number
  y: number

  constructor(x: number, y: number) {
    this.x = x
    this.y = y
  }

  printCoord() {
    console.log(`Die Koordinate ist (${this.x}, ${this.y}).`)
  }
}

let p = new Point(10, 20)
p.printCoord()

In diesem Beispiel definiert die Klasse Point ein einfaches Modell für einen Punkt im 2D-Raum. Instanzen der Klasse können mit neuen Koordinaten erstellt und verwendet werden.

Aufgabe: Definiere eine Klasse Car mit Eigenschaften wie make, model und year. Füge der Klasse eine Methode hinzu, die das Alter des Autos basierend auf dem aktuellen Jahr berechnet.

Basic Generics

Generics erlauben es, wiederverwendbare Komponenten zu erstellen, die mit verschiedenen Typen arbeiten können, ohne die Typsicherheit zu verlieren. Sie sind besonders nützlich in Bibliotheken und Frameworks.

function identity<T>(arg: T): T {
  return arg
}

let output1 = identity<string>('myString')
let output2 = identity<number>(100)

In diesem Beispiel ist identity eine generische Funktion, die jeden übergebenen Wert zurückgibt. Durch das Verwenden von <T> können Sie jede Art von Wert übergeben, während Sie die Typsicherheit behalten.

Aufgabe: Erstelle eine generische Klasse Container, die einen Wert beliebigen Typs speichern kann. Füge Methoden hinzu, um den Wert zu setzen und zu erhalten.

Utility Types

TypeScript bietet mehrere eingebaute Utility-Typen, die Ihnen helfen, gängige Typ-Transformationen auf effiziente Weise durchzuführen. Diese umfassen Partial, Readonly, Pick und mehr.

interface Todo {
  title: string
  description: string
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate }
}

const todo1: Todo = {
  title: 'learn TypeScript',
  description: 'study hard'
}

const todo2 = updateTodo(todo1, { description: 'practice more' })

Partial<T> macht alle Eigenschaften in T optional, was es ideal macht für Funktionen wie updateTodo, die möglicherweise nur einige der Eigenschaften eines Objekts ändern.

Aufgabe: Definiere eine Todo-Liste und implementiere Funktionen zum Hinzufügen, Aktualisieren und Löschen von Todos unter Verwendung von Utility-Typen, um die Flexibilität und Sicherheit zu erhöhen.

Zeit für eure Fragen
& Diskussionen

WieErWill.dev/vcard.vcf